ReactNative熱更新配置
阿新 • • 發佈:2021-01-11
技術標籤:react native
Learning CodePush
熱更新方案中,比較常用的有微軟的 CodePush,ReactNative中文網的pushy,本篇將用pushy配置完整的RN熱更新。
映象更改
cnpm的命令可以去淘寶映象下載依賴包,但是cnpm本身存在一些問題,專案開發時總會有各種奇怪的問題,因此建議還是用npm來安裝依賴包。但是npm原本的映象下載包的速度很慢且不穩定,為了更快安裝包我們可以把npm原本映象的地址改為淘寶的映象地址,這樣既可以用npm指令安裝包,又可以加快速度。
檢視映象地址
npm get registry #https://registry.npmjs.org/
設成淘寶的映象
npm config set registry http://registry.npm.taobao.org/
恢復
npm config set registry https://registry.npmjs.org/
安裝配置
在你的專案根目錄下執行以下命令:
# 全域性安裝命令列工具,每臺電腦只用裝一次
yarn global add react-native-update-cli
# 在專案中安裝熱更新模組
yarn add react-native-update --save
在MainApplication中增加如下程式碼:
// ... 其它程式碼
// 請注意不要少了這句import
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);
}
// ... 其它程式碼
}
}
登入與建立應用
在 https://update.reactnative.cn 註冊帳號,然後在你的專案根目錄下執行以下命令:
$ pushy login
email: <輸入你的註冊郵箱>
password: <輸入你的密碼>
這會在專案資料夾下建立一個.update檔案,注意不要把這個檔案上傳到Git等CVS系統上。你可以在.gitignore末尾增加一行.update來忽略這個檔案。
登入之後可以建立應用。注意iOS平臺和安卓平臺需要分別建立:
$ pushy createApp --platform ios
App Name: <輸入應用名字>
$ pushy createApp --platform android
App Name: <輸入應用名字>
兩次輸入的名字可以相同,這沒有關係。
如果你已經在網頁端或者其它地方建立過應用,也可以直接選擇應用:
#例如:
$ pushy selectApp --platform ios
1) 魚多多(ios)
2) 招財旺(ios)
Total 2 ios apps
Enter appId: <輸入應用前面的編號>
選擇或者建立過應用後,你將可以在資料夾下看到update.json檔案,其內容類似如下形式:
{
"ios": {
"appId": 1,
"appKey": "<一串隨機字串>"
},
"android": {
"appId": 2,
"appKey": "<一串隨機字串>"
}
}
程式碼整合
import React, {
Component,
} from 'react';
import {
StyleSheet,
Platform,
Text,
View,
Alert,
TouchableOpacity,
Linking,
} from 'react-native';
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 MyProject extends Component {
componentDidMount(){
if (isFirstTime) {
Alert.alert('提示', '這是當前版本第一次啟動,是否要模擬啟動失敗?失敗將回滾到上一版本', [
{text: '是', onPress: ()=>{throw new Error('模擬啟動失敗,請重啟應用')}},
{text: '否', onPress: ()=>{markSuccess()}},
]);
} else if (isRolledBack) {
Alert.alert('提示', '剛剛更新失敗了,版本被回滾.');
}
}
doUpdate = async (info) => {
try {
const hash = await downloadUpdate(info);
Alert.alert('提示', '下載完畢,是否重啟應用?', [
{text: '是', onPress: ()=>{switchVersion(hash);}},
{text: '否',},
{text: '下次啟動時', onPress: ()=>{switchVersionLater(hash);}},
]);
} catch(err) {
Alert.alert('提示', '更新失敗.');
}
};
checkUpdate = async () => {
if (__DEV__) {
// 開發模式不支援熱更新,跳過檢查
return;
}
let info;
try {
info = await checkUpdate(appKey);
} catch (err) {
console.warn(err);
return;
}
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: '否',},
]);
}
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
歡迎使用熱更新服務
</Text>
<Text style={styles.instructions}>
這是版本一 {'\n'}
當前原生包版本號: {packageVersion}{'\n'}
當前熱更新版本Hash: {currentVersion||'(空)'}{'\n'}
</Text>
<TouchableOpacity onPress={this.checkUpdate}>
<Text style={styles.instructions}>
點選這裡檢查更新
</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
釋出應用
參考文件-生成已簽名的APK
#在android資料夾下執行
./gradlew assembleRelease
#找到你的應用包
android/app/build/outputs/apk/release/app-release.apk
#執行如下命令
$ pushy uploadApk android/app/build/outputs/apk/release/app-release.apk
#即可上傳apk以供後續版本比對之用。此apk的versionName欄位(位於android/build.gralde中)會被記錄為原生版本號packageVersion。
釋出新的熱更新版本
你可以嘗試修改一行程式碼(譬如將版本一修改為版本二),然後生成新的熱更新版本
$ pushy bundle --platform <ios|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。當然,你也可以在將來使用pushy publish --platform <ios|android> 來發布版本。
Uploading [========================================================] 100% 0.0s
Enter version name: <輸入熱更新版本名字,如1.0.0-rc>
Enter description: <輸入熱更新版本描述>
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)
此時版本已經提交到update服務,但使用者暫時看不到此更新,你需要先將特定的原生包版本繫結到此熱更新版本上。
此時輸入Y立即繫結,你也可以在將來使用pushy update --platform <ios|android>來使得對應原生包版本的使用者更新。 除此以外,你還可以在網頁端操作,簡單的將對應的原生包版本拖到此熱更新版本下即可。
Offset 0
1) FvXnROJ1 1.0.1 (no package)
2) FiWYm9lB 1.0 [1.0]
Enter versionId or page Up/page Down/Begin(U/D/B) <輸入序號,U/D翻頁,B回到開始,序號就是上面列表中)前面的數字>
1) 1.0(normal) - 3 FiWYm9lB (未命名)
Total 1 packages.
Enter packageId: <輸入原生包版本序號,序號就是上面列表中)前面的數字>