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

各种命令

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

编译、生成、运行并启动packager（debug模式）：

react-native run-android

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

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

react-native start

当然，如果你的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，或者直接按模拟器上的菜单键都可以打开它）：

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

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

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

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

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

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

发行正式包

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

不清楚的看截图：

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

cd android && gradlew assembleRelease

生成并安装release包.bat：

cd android && gradlew installRelease