react-native+redux+code-push+code-push-server

注：閱讀本文前吩屹，已假設讀者具備開發(fā)基礎，基于macOS開發(fā)章姓。

本教程使用內網(wǎng)ip佳遣，請確保服務器與設備處于同一網(wǎng)絡。

一凡伊、開發(fā)工具

? ? ? ? 1. visual studio code

? ? ? ? 2. android studio

? ? ? ? 3. intellij idea

? ? ? ? 4. docker

二零渐、開發(fā)準備

? ? ? ? 1. code-push-server (0.5.4)?https://github.com/lisong/code-push-server

? ? ? ? 2. react-native-cli (2.0.1)?https://facebook.github.io/react-native/docs/getting-started.html

? ? ? ? 3. code-push-cli (2.1.9)?https://github.com/microsoft/code-push/tree/master/cli

三、使用docker搭建熱更新服務器（https://github.com/lisong/code-push-server/tree/master/docker）

????????1. 將下載的master解壓至~目錄下

? ? ? ? 2. 在控制臺輸入?vim ~/code-push-server/docker/docker-compose.yml 命令編輯docker-compose.yml文件

? ??????????將DOWNLOAD_URL中YOU_MACHINE_IP替換成本機內網(wǎng)ip

? ??????????將MYSQL_HOST中YOU_MACHINE_IP替換成本機內網(wǎng)ip

? ??????????將REDIS_HOST中YOU_MACHINE_IP替換成本機內網(wǎng)ip

? ? ? ? 3. 在控制臺輸入 vim ~/code-push-server/docker/config.js 命令編輯config.js文件

? ? ? ? ? ? 修改jwt對象下的tokenSecret字段系忙，輸入從https://www.grc.com/passwords.htm獲取的63 random alpha-numeric characters (a-z, A-Z, 0-9)代碼

輸入獲取的代碼

????????3. 在控制臺輸入?sudo docker stack deploy -c ~/code-push-server/docker/docker-compose.yml code-push-server 命令部署

部署熱更新服務器完成

? ? ? ? 4. 訪問http://本機內網(wǎng)ip:3000诵盼，出現(xiàn)登陸頁面，則部署成功

熱更新服務器

四银还、搭建react-native項目

? ? ? ? 1. 使用?react-native init AwesomeProject 命令初始化項目

? ? ? ? 2. 切換到項目目錄下安裝依賴
????????????yarn add?react-native-code-push
????????????yarn add?react-native-gesture-handler
????????????yarn add?react-navigation
????????????yarn add?react-redux
????????????yarn add?redux

? ? ? ? ? ? 安裝依賴后運行
????????????react-native link?react-native-gesture-handler
????????????react-native link?react-native-code-push

? ? ? ? ? ? 執(zhí)行過程中需要輸入熱更新的key风宁，直接回車跳過，之后再手動修改
????????????react-navigation文檔：https://reactnavigation.org/docs/en/getting-started.html
????????????react-native-code-push文檔：https://github.com/microsoft/react-native-code-push

package.json

? ? ? ? 3. ios配置（https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md）
????????????1) 使用xcode項目ios文件夾下的xcodeproj類型文件
????????????2) 點擊左側根目錄蛹疯，修改app版本為1.0.0

修改版本號

? ? ? ? ? ? 3) 添加codepush服務器地址和修改codepush key
????????????????使用Xcode在info.plist中添加CodePushServerURL,值寫http://內網(wǎng)ip:3000
????????????????CodePushDeploymentKey用于存儲key戒财，稍后手動輸入

添加服務器地址

? ? ? ? ? ? 4) 真機測試和模擬器測試
????????????????如果是真機測試，需要注釋紅框部分捺弦，以便從服務器拉取bundle饮寞。如果是模擬器測試，不需要改變

真機測試

????????????????5) 如果在Libraries下無CodePush.xcodeproj列吼，Build Phases中的Link Binary With Libraries中無libCodePush.a和libz.tbd則按照文檔（https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md）添加即可

? ? ? ? ?4. android配置(https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-android.md)
????????????1) 使用android studio打開項目下的android目錄
????????????2) 下載android sdk 配置模擬器(詳細請自行百度)
????????????3) 修改android版本號
????????????選擇android過濾幽崩，打開Gradle Scripts中的build.gradle(Module: app)，修改versionName"1.0"為versionName"1.0.0"

修改版本號

????????????4) 添加服務器配置

????????????????切回project寞钥，打開android/app/src/main/java/com.項目名/MainApplication和android/app/src/main/res/values/strings.xml
????????????????strings.xml中慌申，deployment-key-here替換為key，暫時先不改凑耻，稍后統(tǒng)一改
????????????????在strings.xml中太示，添加<string moduleConfig="true" name="reactNativeCodePush_androidDeploymentServer">http://內網(wǎng)ip:3000</string>
????????????????MainApplication中柠贤，找到new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG)改成new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG, getResources().getString(R.string.reactNativeCodePush_androidDeploymentServer))

修改strings.xml

修改MainApplication.ja

????????5. 至此完成ios和android配置

五、生成key

????????1. 使用key的文件位置
????????????ios: 項目目錄/ios/項目名/info.plist
????????????android: 項目目錄/android/app/src/main/res/values/strings.xml

???????? 2. code-push登陸

? ? ? ? ? ? 1）控制臺輸入code-push login http://內網(wǎng)ip:3000

登陸頁

? ? ? ? ? ? 2）在網(wǎng)頁登陸类缤，默認賬戶是admin臼勉，密碼123456

獲取token

????????????3）登陸成功后將頁面中的代碼復制到控制臺，即可登陸成功

? ? ? ? ? ? 4）使用命令添加app
????????????????ios: code-push app add 應用名 ios react-native
????????????????android: code-push app add 應用名 android react-native
? ? ? ? ? ? ? ? 生成完成后會生成Production（生產）和Staging（測試）兩個key餐弱，選擇你想要的key宴霸，分別替換ios和android中的deployment-key-here

生成key

? ? ? ? ? ? ? ? 刪除：code-push app rm 應用名
? ? ? ? ? ? ? ? 查看：code-push app ls
? ? ? ? ? ? ? ? 查看某個應用的key和版本：code-push deployment ls 應用名 -k

? ? ? ? ? ? 5）至此可以使用react-native run-ios或react-native run-android命令運行模擬器

六、集成Redux膏蚓、code-push瓢谢、react-navigation

項目結構

? ? ? ? 1. index.js

修改index.js

? ? ? ? 2. app.js

app.js

? ? ? ? 3. router.js

router.js

? ? ? ? 4. store.js

store.js

? ? ? ? 5. page1.js

page1.js

? ? ? ? 6. page2.js

page2.js

七、發(fā)布補丁

? ? ? ? 打包：
? ???????react-native bundle --entry-file index.js --bundle-output ./打包目錄/main.jsbundle --platform 版本 --assets-dest ./靜態(tài)文件目錄 --dev false

? ? ? ? 打包IOS：
? ? ? ? eg. react-native bundle --entry-file index.js --bundle-output ./build_ios/main.jsbundle --platform ios --assets-dest ./build_ios --dev false

? ? ? ? 打包Android：
? ? ? ? eg. react-native bundle --entry-file index.js --bundle-output ./build_android/index.android.bundle --platform ios --assets-dest ./build_android --dev false

? ? ? ? 發(fā)布IOS：
? ??????code-push release 應用名 ./build_ios 應用版本 --deploymentName 發(fā)布版本 --description “發(fā)布說明” --mandatory 是否強制更新(boolean)
? ? ? ? eg.?code-push release dometestios ./build_ios 1.0.0 --deploymentName Staging --description “textAndImage” --mandatory true

? ? ? ? 注：應用版本-即當前要在那個應用版本發(fā)布當前補丁

? ? ? ? 1. 使用Xcode 真機安裝（注意：四.3.4)驮瞧，需要注釋部分代碼）