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

时间:2022-03-22 09:17:19

各种命令

个人习惯在项目根目录下把一些常见命令写成bat文件,以后每次要执行什么只需要双击即可:

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

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

react-native run-android

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

我们还可以直接在AndroidStudio中运行项目,然后手动启动packager服务即可:

react-native start

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

当然,如果你的apk已经安装到了设备上,那么直接启动packager就可以开始开发了。

生成release包的命令见后面。

bundle文件介绍

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

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

开启实时reload和remote debug

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

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

选择reload,可以手动重新加载js,如果新添加了图片则需要重新运行apk才可以生效。

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

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

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

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

对于Sources面板,我们的JS和图片等资源在这里全部可以看得到:

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

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

发行正式包

很多东西需要打正式的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
}
}

不清楚的看截图:

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

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

cd android && gradlew assembleRelease

生成并安装release包.bat:

cd android && gradlew installRelease