ReactNative学习笔记(三)打包、调试、运行等相关介绍

2021年09月15日 阅读数:1
这篇文章主要向大家介绍ReactNative学习笔记(三)打包、调试、运行等相关介绍,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

各类命令

我的习惯在项目根目录下把一些常见命令写成bat文件,之后每次要执行什么只须要双击便可:react

W409xH149

编译、生成、运行并启动packager(debug模式):android

react-native run-android

所谓packager其实就是一个文件同步服务,默认监听8081端口,启动它以后,运行debug模式的ReactNative应用能够随时reload咱们的JS。有时候使用上面的命令以后packager服务没有自动启动,此时须要咱们手动启动。react-native

咱们还能够直接在AndroidStudio中运行项目,而后手动启动packager服务便可:bash

react-native start

W677xH523

固然,若是你的apk已经安装到了设备上,那么直接启动packager就能够开始开发了。app

生成release包的命令见后面。测试

bundle文件介绍

bundle文件是一个JS文件的大集合,对于Android平台,就叫index.android.bundle,通常有几百kb,里面包括你本身写的JS和RN自带的一些模块代码,是一个文本文件,能够直接用记事本打开。gradle

默认debug模式下,生成的apk里面的index.android.bundle只是ReactNative默认的一个HelloWorld页面,若是packager正在运行,那么这个apk会链接这个packager提供的服务,将js和其它资源打包成index.android.bundle并加载。因此,若是你的packager服务没有开启,可能看到的只是一个默认的HelloWorld页面。ui

开启实时reload和remote debug

debug 模式下的RN应用自带了一个辅助菜单(双击字母R,或者Ctrl+M,或者直接按模拟器上的菜单键均可以打开它):spa

W394xH646

选择reload,能够手动从新加载js,若是新添加了图片则须要从新运行apk才能够生效。插件

选择Enable Live Reload能够开启实时文件同步,修改了JS以后能够当即自动生效,无需手动reload;

选择Debug JS Remotely能够开启远程调试,会自动用Chrome打开http://localhost:8081/debugger-ui,而后须要咱们手动按下F12打开控制台,在Console面板记得按下图选择一下:

W417xH260

在这里执行代码就会直接做用到RN上,好比alert以后,会在界面弹出提示。

对于Sources面板,咱们的JS和图片等资源在这里所有能够看获得:

W595xH399

要支持断点调试的话好像还要借助一个插件,这个没试过。

发行正式包

不少东西须要打正式的release包才能测试,好比热更新,因此本小节先介绍如何配置打包。

生成签名文件:

cd android/app
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 36500

按照提示一直下一步,其中,my-key-alias是别名,可随意指定,记住你设置的密码,密钥口令和密钥库口令通常都设置相同。执行上述命令后会在android/app下生成my-release-key.keystore文件。

打开android\app\build.gradle文件,在defaultConfig后面追加signingConfigs相关配置,在buildTypes.release中增长signingConfig一行:

defaultConfig {...}
signingConfigs {
    release {
        storeFile file("my-release-key.keystore")
        keyAlias "my-key-alias"
        storePassword "123456"
        keyPassword "123456"
    }
}
splits {...}
buildTypes {
    release {
        ...
        signingConfig signingConfigs.release
    }
}

不清楚的看截图:

W587xH773

在项目根目录上新建一个生成release包.bat,之后双击便可生成正式包了:

cd android && gradlew assembleRelease

生成并安装release包.bat:

cd android && gradlew installRelease