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

注：阅读本文前，已假设读者具备开发基础，基于macOS开发。

本教程使用内网ip，请确保服务器与设备处于同一网络。

一、开发工具

1. visual studio code

2. android studio

3. intellij idea

4. docker

二、开发准备

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替换成本机内网ip

将MYSQL_HOST中YOU_MACHINE_IP替换成本机内网ip

将REDIS_HOST中YOU_MACHINE_IP替换成本机内网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://本机内网ip:3000，出现登陆页面，则部署成功

热更新服务器

四、搭建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

执行过程中需要输入热更新的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://内网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，暂时先不改，稍后统一改
                在strings.xml中，添加<string moduleConfig="true" name="reactNativeCodePush_androidDeploymentServer">http://内网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://内网ip:3000

登陆页

2）在网页登陆，默认账户是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

七、发布补丁

打包：
react-native bundle --entry-file index.js --bundle-output ./打包目录/main.jsbundle --platform 版本 --assets-dest ./静态文件目录 --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

发布IOS：
code-push release 应用名 ./build_ios 应用版本 --deploymentName 发布版本 --description “发布说明” --mandatory 是否强制更新(boolean)
eg. code-push release dometestios ./build_ios 1.0.0 --deploymentName Staging --description “textAndImage” --mandatory true

注：应用版本-即当前要在那个应用版本发布当前补丁

1. 使用Xcode 真机安装（注意：四.3.4)，需要注释部分代码）