一火脉、參考資料

1-1.教程:

https://github.com/Microsoft/code-push/tree/master/cli
https://github.com/Microsoft/react-native-code-push
https://github.com/rccoder/blog/issues/27

1-2.自建server:

https://github.com/lisong/code-push-server
https://github.com/lisong/code-push-web

二缰揪、簡易流程說明

2-1.安裝

npm install -g code-push-cli

2-2.注冊 CodePush

code-push register

會自動打開瀏覽器彈出注冊界面，注冊完成之后會得到一個 token导而，復制后填寫在 Terminal 里面即可。
注冊后對應的有登錄、登出

code-push login
code-push logout

2-3.注冊應用

code-push app add Demo-Android
code-push app add Demo-iOS

每個 APP 都會得到 Production 與 Staging 狀態(tài)的兩個 Key：

Demo-iOS
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ VzNI1ecFmgN8RWukmmqNZOP2B1t_fd416e98-f637-486e-9c2d-26fc45e04c60 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ uwuP9LlIuNWonIBzQ3OpRxwHCfQ7fd416e98-f637-486e-9c2d-26fc45e04c60 │
└────────────┴──────────────────────────────────────────────────────────────────┘

Demo-android
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ ERIHSRO-b2fO8wQbvxpPjeLPoxEjfd416e98-f637-486e-9c2d-26fc45e04c60 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ iB_a1t69Jx_r2MqH0Z9yecw55kFofd416e98-f637-486e-9c2d-26fc45e04c60 │
└────────────┴──────────────────────────────────────────────────────────────────┘

一個是測試環(huán)境导绷、一個是生產環(huán)境，當然也可以自定義名稱

為什么要注冊兩個 APP
CodePush 在發(fā)布新 bundle 的時候目前只能一個一個平臺發(fā)屎飘，為了保證你的 history 看起來不是那么的亂妥曲，建議直接分成兩個 APP 處理

2-4.集成SDK

npm install --save react-native-code-push
react-native link react-native-code-push

期間會提示你輸入 iOS 和 Android 端的 key，這里輸入你用 CodePush 注冊 APP 時產生的 key枚碗，這里我們先可以都輸入每個 Staging 的 key逾一。
如果不幸你忘記了之前產生的 key，可以輸入以下的命令查看：

code-push deployment ls WeHIT-Android

2-5.React Native 源碼集成

import codePush from "react-native-code-push";

class MyApp extends Component {
}

MyApp = codePush(MyApp);

ES7裝飾器

import codePush from "react-native-code-push";

@codePush
class MyApp extends Component {
}

配置

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };//出彈窗提示
let codePushOptions = { checkFrequency: codePush.CheckFrequency.ON_APP_RESUME }//自動更新
class MyApp extends Component {
    onButtonPress() {
        codePush.sync({
            updateDialog: true,
            installMode: codePush.InstallMode.IMMEDIATE
        });
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.onButtonPress}>
                    <Text>Check for updates</Text>
                </TouchableOpacity>
            </View> 
        )
    }
}

MyApp = codePush(codePushOptions)(MyApp);

2-6.發(fā)布

code-push release-react <appName> <platform>

2-6-1 一步發(fā)布

自動默認打包肮雨，在項目根目錄執(zhí)行：

• Android 推包

code-push release-react Demo-Android android

• iOS 推包

code-push release-react Demo-ios ios

2-6-2 兩步發(fā)布

我們自己打好包遵堵，再發(fā)布

• 1. 打包
     用你自己的方式打包
• 2. 發(fā)布

// code-push release <應用名稱> <Bundles所在目錄> <對應的應用版本>
--deploymentName 更新環(huán)境 staging時不需要這個
--description 更新描述
--mandatory 是否強制更新 默認否
    
code-push release Demo-Android ./bundles 1.0.0 --description “Android Update”
code-push release Demo-iOS ./bundles 1.0.0 --description “iOS Update”

更多的參數的使用可見官方文檔

code-push release <appName> <updateContents> <targetBinaryVersion>
[--deploymentName <deploymentName>]
[--description <description>]
[--disabled <disabled>]
[--mandatory]
[--noDuplicateReleaseError]
[--rollout <rolloutPercentage>]
[--privateKeyPath <pathToPrivateKey>]

三、項目特殊業(yè)務

3-1 圖標的熱更新方案

我們項目的圖標庫之前一直用的是iconfont的字體文件怨规，字體是隨著包走的陌宿，無法熱更新。于是在iOS上的解決方案是讓字體動態(tài)加載波丰，也就是我們到bundle里獲取到字體的路徑壳坪，再調用原生提供的方法，讓原生進行加載掰烟。但這個方案在安卓上實現有些困難爽蝴，目前的方案是把字體調整為svg的方式。