一、React native的简要介绍
1、React native的设计思路
Paste_Image.png
Android中具体的转换流程：
ReactNative中把index.android.js编译成Android工程目录下assets里的index.android.bundle文件。
在Android中，导入的ReactNative的jar包中的代码会根据这个bundle文件做相应的转换，转换成Android中“对应的代码”去执行。
2、React native实现热更新
React Native中的热更新有点像App的版本更新，也就是根据查询server端的版本和手机端目前App的版本进行对比，然后来执行是否更新的操作。看看React Native的加载启动机制可知道：React Native会将一系列资源打包成js bundle文件，系统加载js bundle文件，解析并渲染。所以，React Native热更新的根本原理就是更换js bundle文件，并重新加载，新的内容就能展示出来了
Paste_Image.png
上面流程图中展示了如何实现更新的步骤，可以总结为进入App根据版本检查是否需要更新：
（1）更新：
下载最新JsBundle文件以及所需要的图片资源等，下载完成后解析最新JsBundle文件。
（2）不更新：
判断本地是否还有缓存的JsBundle文件：
1>存在：
本地存在JsBundle，即有过热更新操作。那么App直接加载在缓存目录下的JsBundle文件。
2>不存在：
本地不存在JsBundle，即之前从未有过热更新操作。那么App只能使用初始化时打包在assets目录下的index.android.bundle文件。
二、环境的搭建
参看react native中文网上搭建教程：http://bbs.reactnative.cn/topic/10/在windows下搭建react-native-android开发环境
需要安装的软件：JDK，Android SDK(Tools/Android SDK Build-tools (23.0.1)（这个必须版本严格匹配23.0.1）)，Python（必须为2.7.x版本），node.js（最高版本最好），这些软件都要加到环境变量里面，并在cmd中运行（如果是window10系统，cmd命令行窗口要使用管理员模式打开），保证加入正确。
安装react-native命令行工具：npm install -g react-native-cli
创建项目：在你想创建项目的目录下如D:/，运行react-native init MyProject（MyProject就是项目的名字，随意取），之后D盘目录下就会有一个文件夹MyProject，里面就是最简单的react native的程序
检查新创建的项目是否能运行：
- 运行packager：react-native start，可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问通常需要十几秒
- 另开启一个命令行窗口，然后在工程目录下（D:/MyProject）运行：react-native run-android，首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度）
- 运行完毕后可以在真机上看到应用自动启动了，但这时会是App红屏报错，左右摇晃手机，应用会弹出菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081，这时一定要保证防火墙是关闭的，否则会出现各种奇怪的错误，再按back键返回，再左右摇晃手机，在调试菜单中选择Reload JS，就应该可以看到运行的结果了
三、集成到原生应用
在Android Studio中打开原生应用，要保证Terminal中运行grandle installDebug可以编译通过，之后把编译通过的原生应用复制到react native工程下的android目录中（D:/MyProject/android）
A. 修改原生应用的build.gradle
- allprojectCompileSdkVersion和targetSdkVersion需要23或以上
- 添加依赖：
allprojects {
repositories {
jcenter()
maven {
//添加react native依赖，url路径根据实际的来写，本文的如下：
url "$rootDir/node_modules/react-native/android"
}
}
}
- 添加编译库：
dependencies {
...
compile "com.facebook.react:react-native:+"
}
- 编译时，如果报出的错误为，找不到某个so的库（其中有关键词armeabi-v7a或armeabi），则表明原生应用引用的某个SDK所包含的so库，是在armeabi-v7a这个目录下，一个简单的解决办法就是，把原生应用中存放so库的armeabi目录复制一份并重命名为armeabi-v7a，然后在build.gradle中添加：
defaultConfig {
...
ndk {
abiFilters 'armeabi',"armeabi-v7a"
}
}
splits {
abi {
…
include "armeabi-v7a"
}
}
- 之后编译工程，保证gradle修改的部分没有问题，如果编译时提示不能删除build目录下的文件，是因为正在运行packager服务器，需把他停掉
B. 添加原生Activity文件用于启动JS
参考react native中文网“集成到现有原生应用” http://reactnative.cn/docs/0.48/integration-with-existing-apps.html#content，来创建ReactRootView对象，用于启动react native应用(public class ReactNativeInAndroidActivity extends ReactActivity implements DefaultHardwareBackBtnHand)，同时在AndroidManifest.xml中添加此Activity并设定它的主题为Theme.AppCompat.Light.NoActionBar，添加权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
添加react native可以弹出菜单的权限
<activity
android:name="com.facebook.react.devsupport.DevSettingsActivity" />
- 编译并运行，启动RN前端时，可能会红屏报错，关键字有bundle，在cmd命令行，进入到工程目录下，运行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output D:/MyProject/android/原生应用启动目录/assets/index.android.bundle --assets-dest D:/MyProject/android/原生应用启动目录/res/
如果assets目录下多了两个文件index.android.bundle、index.android.bundle.meta，则表示成功，再次Reload JS
网友评论