由于公司项目需要，我抽时间研究了下react native的热更新功能，其实并不复杂，自己在原来的demo上做了实验，还是蛮成功的。废话不多说，我们来看看是怎么实现的，还以之前的BaiDuMapDemo为例。
前提
使用热更新，你必须安装Android NDK，并设置环境变量ANDROID_NDK_HOME，指向你的NDK根目录。例如：/Users/tdzl2003/Downloads/android-ndk-r10e。
具体配置方法请自行百度。
一、安装
在你的项目根目录下运行以下命令：
npm install -g react-native-update-cli rnpm
npm install --save react-native-update@4.x
react-native link react-native-update
如果访问极慢或者显示网络失败，请设置使用淘宝镜像（仅需设置一次）：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global```
>说明：
1.`npm install -g react-native-update-cli rnpm`这一句在每一台电脑上仅需运行一次。
2.如果RN版本低于0.29，请使用`rnpm link`代替`react-native link`命令。
3.我使用的react-native版本为0.42.3，所以对应的是4.x版本。详细的版本请参考下方表格。
####版本对应表
因为React Native不同版本代码结构不同，因而请按下面表格对号入座：
React Native版本 | react-native-update版本
----|------
<= 0.26 | 1.0.x
0.27 - 0.28 | 2.x
0.29 - 0.33 | 3.x
0.34 - 当前 | 4.x
####二、手动link
如果第一步的react-native link已成功(iOS工程和安卓工程均能看到依赖)，可以跳过此步骤。
######(一)IOS
1. 在XCode中的Project Navigator里，右键点击Libraries ➜ Add Files to BaiDuMapDemo
2. 进入node_modules ➜ react-native-update ➜ ios 并选中RCTHotUpdate.xcodeproj
3. 在XCode中的project navigator里，选中BaiDuMapDemo，在 Build Phases ➜ Link Binary With Libraries 中添加 libRCTHotUpdate.a
4. 继续在Build Settings里搜索Header Search Path，添加$(SRCROOT)/../node_modules/react-native-update/ios
######(二)Android
1.在android/settings.gradle中添加如下代码：
include ':react-native-update'
project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')
2.在android/app/build.gradle的 dependencies 部分增加如下代码：
compile project(':react-native-update')
3.检查你的RN版本，如果是0.29及以上,，打开android/app/src/main/java/.../MainApplication.java，否则打开android/app/src/main/java/.../MainActivity.java；在文件开头增加
import cn.reactnative.modules.update.UpdatePackage;
4.在getPackages()方法中增加
new UpdatePackage()
####三、配置Bundle URL
######(一)IOS
1.在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd
2.在你的AppDelegate.m文件中增加如下代码：
// ... 其它代码
import "RCTHotUpdate.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
if DEBUG
// 原来的jsCodeLocation
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
else
jsCodeLocation=[RCTHotUpdate bundleURL];
endif
// ... 其它代码
}
######(二)Android
0.29及以后版本：在你的MainApplication中增加如下代码：
// ... 其它代码
import cn.reactnative.modules.update.UpdateContext;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected String getJSBundleFile() {
return UpdateContext.getBundleUrl(MainApplication.this);
}
// ... 其它代码
}
}
0.28及以前版本：在你的MainActivity中增加如下代码：
// ... 其它代码
import cn.reactnative.modules.update.UpdateContext;
public class MainActivity extends ReactActivity {
@Override
protected String getJSBundleFile() {
return UpdateContext.getBundleUrl(this);
}
// ... 其它代码
}
####四、iOS的ATS例外配置
从iOS9开始，苹果要求以白名单的形式在Info.plist中列出外部的非https接口，以督促开发者部署https协议。在我们的服务部署https协议之前，请在Info.plist中添加如下例外（右键点击Info.plist，选择open as - source code）
####五、登录与创建应用
1.首先请在[http://update.reactnative.cn](http://update.reactnative.cn/)注册帐号，然后在你的项目根目录下运行以下命令：
$ pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>
这会在项目文件夹下创建一个.update文件，注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。
2.登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建：
$ pushy createApp --platform ios
App Name: <输入应用名字>
$ pushy createApp --platform android
App Name: <输入应用名字>
两次输入的名字可以相同，这没有关系。
3.选择或者创建过应用后，你将可以在文件夹下看到update.json文件：
至此应用的创建/选择就已经成功了。上张图：
####六、添加热更新功能代码
在BaiDuMapDemo.js中添加代码：
...
// 其他代码
import {
isFirstTime,
isRolledBack,
packageVersion,
currentVersion,
checkUpdate,
downloadUpdate,
switchVersion,
switchVersionLater,
markSuccess,
} from 'react-native-update';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];
export default class BaiduMapDemo extends Component {
...
//其他代码
this.checkUpdate = this.checkUpdate.bind(this);
}
componentWillMount() {
if (isFirstTime) {
Alert.alert('提示', '这是当前版本第一次启动,是否要模拟启动失败?失败将回滚到上一版本', [
{text: '是', onPress: ()=>{throw new Error('模拟启动失败,请重启应用')}},
{text: '否', onPress: ()=>{markSuccess()}},
]);
} else if (isRolledBack) {
Alert.alert('提示', '刚刚更新失败了,版本被回滚.');
}
}
doUpdate = info => {
downloadUpdate(info).then(hash => {
Alert.alert('提示', '下载完毕,是否重启应用?', [
{text: '是', onPress: ()=>{switchVersion(hash);}},
{text: '否',},
{text: '下次启动时', onPress: ()=>{switchVersionLater(hash);}},
]);
}).catch(err => {
Alert.alert('提示', '更新失败.');
});
};
checkUpdate () {
console.log('appKey.....',appKey);
checkUpdate(appKey).then((info) => {
console.log('info...', info);
if (info.expired) {
Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [
{text: '确定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
]);
} else if (info.upToDate) {
Alert.alert('提示', '您的应用版本已是最新.');
} else {
Alert.alert('提示', '检查到新的版本'+info.name+',是否下载?\n'+ info.description, [
{text: '是', onPress: ()=>{this.doUpdate(info)}},
{text: '否',},
]);
}
}).catch(err => {
console.log('err,,...',err);
Alert.alert('提示', '更新失败.');
});
};
render() {
return (
<View style={styles.container}>
...
// 其他代码
<View style={styles.row}>
<Button title="Traffic" onPress={() => {
this.setState({
trafficEnabled: !this.state.trafficEnabled
});
}} />
...
// 其他代码
<Button title="检查更新" onPress={() => {
console.log('我这行了吗');
this.checkUpdate();
}} />
</View>
</View>
);
}
}
...
// 其他代码
####七、发布应用
下面我们要分成两部分来搞了，先来搞Android发布应用。
#####(一)Android
######1.生成签名密钥
使用如下命令生成密钥：
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
######2.设置gradle变量
(1)把my-release-key.keystore文件放到你工程中的android/app文件夹下。
(2)编辑~/.gradle/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）。
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
######3.添加签名到项目的gradle配置文件
编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
######4.生成发行APK包
在终端中运行以下命令：
$ cd android && ./gradlew assembleRelease
生成的APK文件位于android/app/build/outputs/apk/app-release.apk，它已经可以用来发布了。
######5.发布
运行如下命令：
$ pushy uploadApk android/app/build/outputs/apk/app-release.apk
######6.发布新的热更新版本
修改一行代码，例如：
在根目录下输入命令：
$ pushy bundle --platform android
Bundling with React Native version: 0.22.2
<各种进度输出>
Bundled saved to: build/output/android.1459850548545.ppk
Would you like to publish it?(Y/N)
输入Y
Uploading [========================================================] 100% 0.0s
Enter version name: 1.0.1
Enter description: 测试
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)
输入Y
- 1.0(normal) (newest)
Total 1 packages.
Enter packageId:9310（上面列表中前面的数字）
版本绑定完毕后，客户端就应当可以检查到更新并进行更新了。
至此为止，android已经完成了植入代码热更新的全部工作。
#####(二)IOS
######1.生成发行APK包
>注：ios打包有很多种方法，因为本demo在Xcode中归档失败，总是报Linker command failed with exit code 1错误，暂未找到错误原因。因此我将APP直接运行到手机上，其他打包方式请自行百度。
1.终端cd到项目目录，执行命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
2.导入生成的文件到XCode
>注：详细内容见文章[RN-iOS打包真机测试](http://www.jianshu.com/p/a3d486346edc)
3.在Xcode中选择Product -> Scheme -> Edit Scheme (cmd + <)，然后选择Run选项卡，将Build Configuration设置为release
如图：
4.选择设备
5.选择Product -> Build(command+B)，build成功后，找到目录下product文件夹中的BaiDuMapDemo.app，右键Show in Finder，如图：
5.打开iTunes，将BaiduMapDemo文件拖到应用中，再将iTunes中的BaiduMapDemo拖到桌面，并在终端输入以下命令：
pushy uploadIpa /Users/xxx/Desktop/BaiDuMapDemo.ipa
6.连接真机，在Xcode中选择真机，点击运行，即可安装app。
######2.发布新的热更新版本
修改一行代码，在根目录下输入命令：
版本绑定完毕后，客户端就应当可以检查到更新并进行更新了。
至此为止，ios完成了植入代码热更新的全部工作。
上几张效果图：
