由于公司项目需要，我抽时间研究了下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 [email protected]
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
![20170601-sybil052-1.png](http://upload-images.jianshu.io/upload_images/5357992-92823e9fcc3f37e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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）
![20170601-sybil052-2.png](http://upload-images.jianshu.io/upload_images/5357992-bbd643e4e05e85a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####五、登录与创建应用
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文件：
![20170601-sybil052-3.png](http://upload-images.jianshu.io/upload_images/5357992-93634ce6452b4653.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
至此应用的创建/选择就已经成功了。上张图：

![20170601-sybil052-4.png](http://upload-images.jianshu.io/upload_images/5357992-98acce61902fff96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####六、添加热更新功能代码
在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 (

...
// 其他代码

react-native 热更新(ios&android)

前提

一、安装

import "RCTHotUpdate.h"

if DEBUG

else

endif

你可能感兴趣的:(react-native 热更新(ios&android))