与代码无关的React Native常识

最近想学习下React Native，用JavaScript来编写Android app。在写代码之前，先搞明白几个问题：用什么开发工具比较好？React Native的原理是什么，开发的App性能和原生应用一样好么？

搭建开发环境

React Native CLI

安装Node.js，通过npm命令安装React Native：

npm install -g react-native-cli

Visual Studio Code

代码编辑器可以选择VSCode，因为可以找到很多扩展插件。

Android Studio

安装Android Studio。按照React Native的要求，打开Android SDK Manager安装6.0相关的包。

React Native ‘Hello World’

使用命令行来创建一个新的工程：

react-native init helloworld

创建之后的工程目录结构：

在手机或者模拟器上运行程序。注意：只能有一个设备连接着。

react-native run-android

在运行程序的时候，首先会启动React Packager。React Packager会编译index.android.js文件。

Hot reloading

如果程序运行在模拟器上，只需要双击键盘上的R就可以重新加载修改的代码。如果代码运行在手机上，需要先摇晃一下手机，调出菜单，然后选择重新加载。不过这样比较麻烦。所以在菜单上可以激活hot reloading避免每次都要摇晃手机来点击菜单。

小米手机上无法运行程序怎么办

打开设置>更多设置>开发者选项>关闭‘启用MIUI优化’，重启设备就可以了。

React Native的工作原理

React Native使用JavaScript core作为JavaScript引擎。通过解析JavaScript接口，找到对应的Native接口。因此React Native创建的移动app性能和原生没有差别。我们可以打开编译出来的APK文件一探究竟。

APK文件

React Native编译工程之后会生成helloworld\android\app\build\outputs\apk\app-debug.apk。打开这个APK文件看一下有什么：

在lib目录中可以看到有很多的*.so库文件，其中就包含了libjsc.so，也就是JavaScript的引擎。

JavaScript资源文件

在app-debug.apk文件中似乎没有看到任何和JavaScript代码相关的文件，这是什么情况？试一下单独安装app-debug.apk然后直接运行。你会发现无法运行程序。因为React Packager没有启动。我们安装在手机上的只是一个客户端程序，它必须和远程的服务端通信来更新代码修改。app-debug.apk并不是真正的应用安装包。

用下面的命令来构建一个完整的app包：

cd android
gradlew assembleRelease

一个新的APK文件会生成在helloworld\android\app\build\outputs\apk\ app-release-unsigned.apk。

打开这个APK比较下，可以发现多了asset资源目录：

把这个APK签名之后就可以发布到app市场了。

React Native的组件资源

React Native有很多自定义的组件，可以在js.coach上搜索下载。

学习视频

如果可以访问YouTube，可以看下这个视频：

• Under The Hood of React Native

不用Android Studio和Xcode也可以开发React Native应用

Facebook最近又发布了一个新的工具Create React Native App。有了这个工具，开发者不需要安装Android Studio和Xcode就可以开发React Native应用了。

npm i -g create-react-native-app
create-react-native-app helloworld
cd helloworld
npm start

命令行运行之后会生成一个二维码。在手机上先安装Expo app，然后扫描二维码来加载程序。原理和app-debug.apk是一样的，这只是一个客户端。你需要保证手机和PC在同一个局域网下。

安装Expo App

如果你是iOS开发者，Expo app安装很简单，在iTunes上可以找到。如果你需要安装Android版本，需要用Google Play安装。如果无法访问Google Play，可以用APKDOWNLOADER来下载Google Play上的APK。Expo app的包名是host.exp.exponent。

看下这个工程和React Native命令生成的有什么差别：

这里没有Android目录以及index.android.js文件。

需要注意的是使用这个工程开发，只能使用JavaScript。如果需要用到native code，要把工程转换成React Native工程。这个过程不可逆。运行命令：

npm run eject

再比较下结构：

现在差不多一样了。运行程序：

react-native run-android