由于公司項(xiàng)目需要，我抽時(shí)間研究了下react native的熱更新功能漂问，其實(shí)并不復(fù)雜赖瞒，自己在原來的demo上做了實(shí)驗(yàn)，還是蠻成功的蚤假。廢話不多說栏饮，我們來看看是怎么實(shí)現(xiàn)的，還以之前的BaiDuMapDemo為例勤哗。
前提
使用熱更新，你必須安裝Android NDK掩驱，并設(shè)置環(huán)境變量ANDROID_NDK_HOME芒划，指向你的NDK根目錄。例如：/Users/tdzl2003/Downloads/android-ndk-r10e欧穴。
具體配置方法請(qǐng)自行百度构罗。
一妇萄、安裝
在你的項(xiàng)目根目錄下運(yùn)行以下命令：
npm install -g react-native-update-cli rnpm
npm install --save react-native-update@4.x
react-native link react-native-update
如果訪問極慢或者顯示網(wǎng)絡(luò)失敗，請(qǐng)?jiān)O(shè)置使用淘寶鏡像（僅需設(shè)置一次）：
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`這一句在每一臺(tái)電腦上僅需運(yùn)行一次。
2.如果RN版本低于0.29纵顾，請(qǐng)使用`rnpm link`代替`react-native link`命令。
3.我使用的react-native版本為0.42.3丧肴，所以對(duì)應(yīng)的是4.x版本蘸劈。詳細(xì)的版本請(qǐng)參考下方表格。
####版本對(duì)應(yīng)表
因?yàn)镽eact Native不同版本代碼結(jié)構(gòu)不同弦叶，因而請(qǐng)按下面表格對(duì)號(hào)入座：
React Native版本 | react-native-update版本
----|------
<= 0.26 | 1.0.x
0.27 - 0.28 | 2.x
0.29 - 0.33 | 3.x
0.34 - 當(dāng)前 | 4.x
####二俊犯、手動(dòng)link
如果第一步的react-native link已成功(iOS工程和安卓工程均能看到依賴)，可以跳過此步驟伤哺。
######(一)IOS
1. 在XCode中的Project Navigator里燕侠，右鍵點(diǎn)擊Libraries ? Add Files to BaiDuMapDemo
2. 進(jìn)入node_modules ? react-native-update ? ios 并選中RCTHotUpdate.xcodeproj
3. 在XCode中的project navigator里者祖，選中BaiDuMapDemo，在 Build Phases ? Link Binary With Libraries 中添加 libRCTHotUpdate.a
4. 繼續(xù)在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接口嚷往，以督促開發(fā)者部署https協(xié)議葛账。在我們的服務(wù)部署https協(xié)議之前，請(qǐng)?jiān)贗nfo.plist中添加如下例外（右鍵點(diǎn)擊Info.plist皮仁，選擇open as - source code）
####五籍琳、登錄與創(chuàng)建應(yīng)用
1.首先請(qǐng)?jiān)赱http://update.reactnative.cn](http://update.reactnative.cn/)注冊(cè)帳號(hào)，然后在你的項(xiàng)目根目錄下運(yùn)行以下命令：
$ pushy login
email: <輸入你的注冊(cè)郵箱>
password: <輸入你的密碼>
這會(huì)在項(xiàng)目文件夾下創(chuàng)建一個(gè).update文件贷祈，注意不要把這個(gè)文件上傳到Git等CVS系統(tǒng)上趋急。你可以在.gitignore末尾增加一行.update來忽略這個(gè)文件。
2.登錄之后可以創(chuàng)建應(yīng)用势誊。注意iOS平臺(tái)和安卓平臺(tái)需要分別創(chuàng)建：
$ pushy createApp --platform ios
App Name: <輸入應(yīng)用名字>
$ pushy createApp --platform android
App Name: <輸入應(yīng)用名字>
兩次輸入的名字可以相同呜达，這沒有關(guān)系。
3.選擇或者創(chuàng)建過應(yīng)用后粟耻，你將可以在文件夾下看到update.json文件：
至此應(yīng)用的創(chuàng)建/選擇就已經(jīng)成功了查近。上張圖：
####六、添加熱更新功能代碼
在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('提示', '這是當(dāng)前版本第一次啟動(dòng),是否要模擬啟動(dòng)失敗?失敗將回滾到上一版本', [
{text: '是', onPress: ()=>{throw new Error('模擬啟動(dòng)失敗,請(qǐng)重啟應(yīng)用')}},
{text: '否', onPress: ()=>{markSuccess()}},
]);
} else if (isRolledBack) {
Alert.alert('提示', '剛剛更新失敗了,版本被回滾.');
}
}
doUpdate = info => {
downloadUpdate(info).then(hash => {
Alert.alert('提示', '下載完畢,是否重啟應(yīng)用?', [
{text: '是', onPress: ()=>{switchVersion(hash);}},
{text: '否',},
{text: '下次啟動(dòng)時(shí)', 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('提示', '您的應(yīng)用版本已更新,請(qǐng)前往應(yīng)用商店下載新的版本', [
{text: '確定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
]);
} else if (info.upToDate) {
Alert.alert('提示', '您的應(yīng)用版本已是最新.');
} 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>
);
}
}
...
// 其他代碼
####七挤忙、發(fā)布應(yīng)用
下面我們要分成兩部分來搞了霜威，先來搞Android發(fā)布應(yīng)用。
#####(一)Android
######1.生成簽名密鑰
使用如下命令生成密鑰：
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
######2.設(shè)置gradle變量
(1)把my-release-key.keystore文件放到你工程中的android/app文件夾下册烈。
(2)編輯~/.gradle/gradle.properties（沒有這個(gè)文件你就創(chuàng)建一個(gè)）戈泼，添加如下的代碼（注意把其中的****替換為相應(yīng)密碼）。
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
######3.添加簽名到項(xiàng)目的gradle配置文件
編輯你項(xiàng)目目錄下的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.生成發(fā)行APK包
在終端中運(yùn)行以下命令：
$ cd android && ./gradlew assembleRelease
生成的APK文件位于android/app/build/outputs/apk/app-release.apk大猛，它已經(jīng)可以用來發(fā)布了。
######5.發(fā)布
運(yùn)行如下命令：
$ pushy uploadApk android/app/build/outputs/apk/app-release.apk
######6.發(fā)布新的熱更新版本
修改一行代碼淀零，例如：
在根目錄下輸入命令：
$ pushy bundle --platform android
Bundling with React Native version: 0.22.2
<各種進(jìn)度輸出>
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: 測(cè)試
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（上面列表中前面的數(shù)字）
版本綁定完畢后胎署，客戶端就應(yīng)當(dāng)可以檢查到更新并進(jìn)行更新了。
至此為止窑滞，android已經(jīng)完成了植入代碼熱更新的全部工作琼牧。
#####(二)IOS
######1.生成發(fā)行APK包
>注：ios打包有很多種方法恢筝，因?yàn)楸綿emo在Xcode中歸檔失敗，總是報(bào)Linker command failed with exit code 1錯(cuò)誤巨坊，暫未找到錯(cuò)誤原因撬槽。因此我將APP直接運(yùn)行到手機(jī)上，其他打包方式請(qǐng)自行百度趾撵。
1.終端cd到項(xiàng)目目錄侄柔，執(zhí)行命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
2.導(dǎo)入生成的文件到XCode
>注：詳細(xì)內(nèi)容見文章[RN-iOS打包真機(jī)測(cè)試](http://www.reibang.com/p/a3d486346edc)
3.在Xcode中選擇Product -> Scheme -> Edit Scheme (cmd + <)，然后選擇Run選項(xiàng)卡占调，將Build Configuration設(shè)置為release
如圖：
4.選擇設(shè)備
5.選擇Product -> Build(command+B)暂题，build成功后，找到目錄下product文件夾中的BaiDuMapDemo.app究珊，右鍵Show in Finder薪者，如圖：
5.打開iTunes，將BaiduMapDemo文件拖到應(yīng)用中剿涮，再將iTunes中的BaiduMapDemo拖到桌面言津，并在終端輸入以下命令：
pushy uploadIpa /Users/xxx/Desktop/BaiDuMapDemo.ipa
6.連接真機(jī)，在Xcode中選擇真機(jī)取试，點(diǎn)擊運(yùn)行悬槽，即可安裝app。
######2.發(fā)布新的熱更新版本
修改一行代碼瞬浓，在根目錄下輸入命令：
版本綁定完畢后初婆，客戶端就應(yīng)當(dāng)可以檢查到更新并進(jìn)行更新了。
至此為止猿棉，ios完成了植入代碼熱更新的全部工作磅叛。
上幾張效果圖：
