一抗楔、 擁有一個能運行的Android項目徐绑，項目名CodePushDemo
二、 已經(jīng)看了已有Android項目接入ReactNative（一）候味，并且按照步驟接入了RN，能打包apk并安裝到手機隔心，運行頁面如下：
三白群、 搭建本地CodePush服務(wù)器
可以直接用微軟的服務(wù)，但是服務(wù)器在國外不穩(wěn)定硬霍，由于CodePushServer已經(jīng)開源帜慢，所以可以down下來自己搭建。
3.1 確保已經(jīng)安裝mysql唯卖，codepush會自動創(chuàng)建數(shù)據(jù)庫記錄版本等信息
3.2 從git下載服務(wù)端源碼
git clone https://github.com/lisong/code-push-server.git
進(jìn)入code-push-server根目錄粱玲，下載服務(wù)端需要的依賴：
npm install
3.3 修改服務(wù)端配置
配置數(shù)據(jù)庫：
db: {
username: process.env.RDS_USERNAME || "root",
password: process.env.RDS_PASSWORD || "", //我沒有設(shè)置密碼，所以是空字符串
database: process.env.DATA_BASE || "codepush",
host: process.env.RDS_HOST || "127.0.0.1",
port: process.env.RDS_PORT || 3306,
dialect: "mysql",
logging: false,
operatorsAliases: false,
}
配置本地存儲目錄：
local: {
storageDir: process.env.STORAGE_DIR || "C:/workspace/CodePush/code-push-server/download", //我就在項目下新建了一個download文件夾來存儲上傳的bundle
downloadUrl: process.env.LOCAL_DOWNLOAD_URL || "http://127.0.0.1:3000/download",
public: '/download'
}
官方是要求配置jwt的拜轨，但是我沒有配置也能用抽减，最好還是配上，避免不必要的麻煩：
jwt: {
// Recommended: 63 random alpha-numeric characters
// Generate using: https://www.grc.com/passwords.htm //去這個網(wǎng)址復(fù)制一個橄碾，不要用我已經(jīng)在用的
tokenSecret: process.env.TOKEN_SECRET ||'EKlCydP2vGppvHv7F35uvF4VLzhX3ULng15X0dOZck9gwXp1Mcfg8eXtTJjjkOa'
}
3.4 初始化創(chuàng)建數(shù)據(jù)庫
node ./bin/db init --dbhost localhost --dbuser root —dbpassword
3.5 啟動CodePushServer
node ./bin/www
四卵沉、 在本地服務(wù)器添加項目
4.1 安裝code-push-cli
npm install code-push-cli@latest -g
此時已經(jīng)可以使用code-push命令行了。
4.2 登錄code-push服務(wù)器
code-push login http://localhost:3000
運行后會打開瀏覽器堪嫂，需要輸入賬號admin密碼123456偎箫，獲取到token再填回命令行里，登錄成功皆串。
4.3 添加你的項目淹办，此時還沒有版本的數(shù)據(jù)，只需要一個項目名字CodePushDemo就行
code-push add app CodePushDemo android react-native
添加完會提供兩個key恶复，需要記錄下來怜森，一個是生產(chǎn)環(huán)境Production的速挑，一個是測試環(huán)境Staging的。
五副硅、 配置原生項目
服務(wù)器搭好了姥宝，項目也添加了，剩下的就是如何將開發(fā)的app和服務(wù)器連接起來恐疲，關(guān)鍵就是上面記錄的兩個key腊满。
5.1 改造application
引入CodePush模塊，同時重寫獲取JSBundleFile的方法培己，由CodePush告訴我們讀哪個bundle文件去加載React的內(nèi)容碳蛋。
但是此時CodePush還是爆紅的，那從哪去找這個引用呢省咨？
5.2 根目錄下安裝react-native-code-push
npm install --save react-native-code-push
安裝完成肃弟，在項目根目錄的node_modules下找到react-native-code-push模塊，展開目錄零蓉，可以看到CodePush類笤受，手動引用進(jìn)項目。
5.3 gradle配置
app的build.gradle增加配置：
dependencies {
...
implementation project(':react-native-code-push')
}
apply from: "../node_modules/react-native/react.gradle"
apply from: "../node_modules/react-native-code-push/android/codepush.gradle"
project的setting.gradle增加配置：
include ':app'
//添加下面兩行
include ':react-native-code-push'
project(':react-native-code-push').projectDir=new File(rootProject.projectDir, './node_modules/react-native-code-push/android/app')
重新構(gòu)建完成敌蜂，此時CodePush已經(jīng)導(dǎo)入完成了箩兽，查看CodePush的構(gòu)造函數(shù)：
public CodePush(String deploymentKey, Context context, boolean isDebugMode, String serverUrl) {
this(deploymentKey, context, isDebugMode);
mServerUrl = serverUrl;
}
第一個參數(shù)是保存的key，由于存在debug和release的區(qū)別紊册，可以繼續(xù)改造app的build.gradle文件比肄，將key差異化：
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
buildConfigField "String", "CODEPUSH_KEY", '"NwAy0d7C9yHyBZqEzdfkVaNO6izR4ksvOXqog"'
signingConfig signingConfigs.release
}
debug {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
buildConfigField "String", "CODEPUSH_KEY", '"M2fp5m8A9nPrCFSnJeJoYGnvtXGX4ksvOXqog"'
}
}
最后一點，修改版本號為1.0.0囊陡，否則可能熱更不成功
5.4 index.android.js文件修改
在打開React頁面的時候進(jìn)行安裝熱更，附上js文件：
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
AppState
} from 'react-native';
import CodePush from 'react-native-code-push';
export default class CodePushComponent extends Component {
// 增加的內(nèi)容
componentDidMount() {
AppState.addEventListener("change", (newState) => {
newState === 'active' && CodePush.sync();
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
我是 ReactNative
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</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,
},
});
AppRegistry.registerComponent('CodePushComponent', () => CodePushComponent);
六掀亥、 發(fā)布更新
以上配置完成撞反，已經(jīng)可以打包了，這時在js里面做出一些修改搪花，然后直接版本更新：
code-push release-react CodePushDemo android --t 1.0.0 --d Staging --des '更新了一些js文字' -m false
參數(shù)解釋： --t 表示需要更新的版本
--d 表示上傳bundle的環(huán)境
--des 后臺記錄的描述
-m 是否強制更新
命令行在服務(wù)器端查看更新情況：
重新打開app遏片，如果已經(jīng)打開的需要殺掉進(jìn)程一次，因為沒有設(shè)置強制更新撮竿，需要下一次啟動可以看到變化吮便。
最終效果：
