此教程是在Mac 上完成

mysql安裝

網(wǎng)絡(luò)上有很多mysql的安裝教程，這里不在贅述，只要記住用戶名和密碼 就行了，用戶名一般是root，密碼是你登陸mysql的密碼（第一次登錄成功后，建議修改個(gè)好記的密碼）

搭建和配置CodePush熱更新服務(wù)器

code push的熱更新服務(wù)器有兩種：一種是開(kāi)源的code-push-server,另一個(gè)就是微軟的codepush，這個(gè)需要注冊(cè)codepush 賬號(hào)等等，這里是用第一種方式。

git clone https://github.com/lisong/code-push-server.git
cd code-push-server
yarn //相當(dāng)于npm install

//配置數(shù)據(jù)庫(kù)，code-push-server使用mysql作為數(shù)據(jù)庫(kù)
//在code-push-server目錄中

./bin/db init --dbhost localhost --dbuser root --dbpassword mysqlpassword// mysqlpassword為安裝的mysql的密碼

//修改配置文件 code-push-server/config/config.js

  db: {
    username: process.env.RDS_USERNAME || "root",
    password: process.env.RDS_PASSWORD || 'mysqlpassword',//這個(gè)是你mysql的密碼
    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
  }，
  local: {
    // Binary files storage dir, Do not use tmpdir and it's public download dir.
    //storageDir需要自己創(chuàng)建
    storageDir: "/Users/nichol/code-push/Sites/storage",
    // Binary files download host address which Code Push Server listen to. the files storage in storageDir.
//自己電腦或服務(wù)器的ip地址
    downloadUrl: "http://youip:3000/download",
    // public static download spacename.
    public: '/download'
  },
  jwt: {
    // Recommended: 63 random alpha-numeric characters
    // Generate using: https://www.grc.com/passwords.htm
  //自己通過(guò)上面的網(wǎng)址生成
    tokenSecret: 'u8zYR4YyhpVTzBVVPBqs8Gcke9lOGfdHpnRn7EETmcYcHQmTzLEJW0AnPdITpgn'
  },
common: {
    /*
     * tryLoginTimes is control login error times to avoid force attack.
     * if value is 0, no limit for login auth, it may not safe for account. when it's a number, it means you can
     * try that times today. but it need config redis server.
     */
    tryLoginTimes: 0,
    // CodePush Web(https://github.com/lisong/code-push-web) login address.
    //codePushWebUrl: "http://127.0.0.1:3001/login",
    // create patch updates's number. default value is 3
    diffNums: 3,
    // data dir for caclulate diff files. it's optimization.
    //自己創(chuàng)建
    dataDir: "/Users/nichol/code-push/Sites/storage",
    // storageType which is your binary package files store. options value is ("local" | "qiniu" | "s3")
    storageType: "local",
    // options value is (true | false), when it's true, it will cache updateCheck results in redis.
    updateCheckCache: false
  }

到這里coder-push-server基本配置已經(jīng)完成

啟動(dòng)并登錄CodePush熱更新服務(wù)器

啟動(dòng)服務(wù)器,在code-push-server目錄下

./bin/www

安裝一個(gè)重要的命令行工具,以后會(huì)經(jīng)常用到的

yarn global add code-push-cli

登錄 code-push-server

code-push login http://127.0.0.1:3000 //執(zhí)行完這個(gè)命令 需要輸入一個(gè)token值
//然后在瀏覽器中輸入http://127.0.0.1:300 輸入用戶名admin，密碼123456 , 然后登錄 獲取token，復(fù)制token ，粘貼到 需要輸入token的地方

在服務(wù)器端添加應(yīng)用

code-push app add AwesomeProject-android android //AwesomeProject為自己創(chuàng)建的工程名
code-push app add AwesomeProject-ios ios

可以使用code-push app list 命令查看

配置客戶端

在你的RN工程根目錄下執(zhí)行如下命令

yarn add react-native-code-push
react-native link react-native //在andorid中需要一些依賴，這個(gè)命令會(huì)自動(dòng)添加依賴

配置android端的MainApplication.java文件

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new CodePush(“efJOrJ9Ae9mcKDVUBImsiW3swX8t4ksvOXqog”, getApplicationContext(), BuildConfig.DEBUG,"http://yourip:3000")
      );
    }

CodePush 構(gòu)造方法的第一個(gè)參數(shù)是Deployment Key(請(qǐng)?zhí)顚?xiě)自己的key值，我要測(cè)試線上版本，所以使用的是Production的deployment key)，這個(gè)Deployment Key分為兩類Production（生產(chǎn)版本）和Staging（測(cè)試版本），通過(guò)下列命令可以查看相關(guān)key：

code-push deployment list AwesomeProject-android -k

CodePush 構(gòu)造方法的的第四個(gè)參數(shù)是熱更新的服務(wù)器地址，一般是“http://yourip:3000”這個(gè)形式的

修改App.js文件，類似如下：

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
import CodePush from 'react-native-code-push';
let codePushOptions = {
    //設(shè)置檢查更新的頻率
    //ON_APP_RESUME APP恢復(fù)到前臺(tái)的時(shí)候
    //ON_APP_START APP開(kāi)啟的時(shí)候
    //MANUAL 手動(dòng)檢查
    checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME
};
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {

    //如果有更新的提示
    syncImmediate() {
        CodePush.sync( {
                //安裝模式
                //ON_NEXT_RESUME 下次恢復(fù)到前臺(tái)時(shí)
                //ON_NEXT_RESTART 下一次重啟時(shí)
                //IMMEDIATE 馬上更新
                installMode : CodePush.InstallMode.IMMEDIATE ,
                //對(duì)話框
                updateDialog : {
                    //是否顯示更新描述
                    appendReleaseDescription : true ,
                    //更新描述的前綴。 默認(rèn)為"Description"
                    descriptionPrefix : "更新內(nèi)容：" ,
                    //強(qiáng)制更新按鈕文字，默認(rèn)為continue
                    mandatoryContinueButtonLabel : "立即更新" ,
                    //強(qiáng)制更新時(shí)的信息. 默認(rèn)為"An update is available that must be installed."
                    mandatoryUpdateMessage : "必須更新后才能使用" ,
                    //非強(qiáng)制更新時(shí)，按鈕文字,默認(rèn)為"ignore"
                    optionalIgnoreButtonLabel : '稍后' ,
                    //非強(qiáng)制更新時(shí)，確認(rèn)按鈕文字. 默認(rèn)為"Install"
                    optionalInstallButtonLabel : '后臺(tái)更新' ,
                    //非強(qiáng)制更新時(shí)，檢查到更新的消息文本
                    optionalUpdateMessage : '有新版本了，是否更新？' ,
                    //Alert窗口的標(biāo)題
                    title : '更新提示'
                } ,
            } ,
        );
    }
    componentWillMount() {
        CodePush.disallowRestart();//頁(yè)禁止重啟
        this.syncImmediate(); //開(kāi)始檢查更新
    }

    componentDidMount() {
        CodePush.allowRestart();//在加載完了，允許重啟
    }

  render() {
    return (
        <View>
          <Text>這是測(cè)試code push</Text>
        </View>
    );
  }
}

到此客戶端相關(guān)配置完成

測(cè)試Android 線上版本的熱更新

將RN工程中的android部分導(dǎo)入的Android Studio中，方便原生代碼的開(kāi)發(fā)。配置keystore等，使之能編譯出release版本。

在android/app/src/main 目錄下 創(chuàng)建一個(gè)assets目錄（自動(dòng)生產(chǎn)的bundle會(huì)放在這里的）
在RN工程根目錄下，執(zhí)行如下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
//--entry-file index.js 這個(gè)index.js名字根據(jù)RN工程根目錄下存在的文件確定，有的是存在index.andorid.js的

在android項(xiàng)目部分執(zhí)行assembleRelease ，生成最終的release版本的apk文件，將這個(gè)文件安裝到手機(jī)中。

修改js文件使之發(fā)生改變，在RN工程根目錄運(yùn)行

code-push release-react Awesome-android android -d Production -m true

以上名利是強(qiáng)制更新線上的版本 release-react 默認(rèn)是發(fā)布Staging的版本，所以必須加-d Production，如果驗(yàn)證 Staging版本就不需要-d Production

退出手機(jī)的應(yīng)用，重新進(jìn)入應(yīng)用，會(huì)看到一個(gè)更新提示對(duì)話框，點(diǎn)擊更細(xì)即可