RN - codePush热更新 - IOS&RN配置
codePush 安装
安装codePush CLI
安装CodePush指令，直接在终端上输入如下命令即可，注意：这个CodePush指令只需要全局安装一次即可，如果第一次安装成功了，那后面就不在需要安装
npm install -g code-push-cli
注册 CodePush账号
code-push register
注意：当执行完上面的命令后，会自动打开一个授权网页，让你选择使用哪种方式进行授权登录 推荐使用gitHub
注册成功后会有一个key
把这个KEY在终端填写进去即可。可用登录命令验证是否登录成功
CodePush注册登录相关命令：
code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key
在CodePush服务器注册App
code-push app add <appName> <platform> react-native
//例子：code-push app add CodePushDemo ios react-native
CodePush管理App的相关命令：
code-push app add 在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app list 或则 ls 列出账号下面的所有app
code-push app transfer 把app的所有权转移到另外一个账号
创建成功后会有Staging&Production 两个KEY 这两个KEY很重要 原生集成CodePush 需要使用到。
后面如果忘记可输入以下命令插看：
code-push deployment ls <appName> -k
RN集成codePush
安装第三方库 codepush
npm install react-native-code-push --save
连接 codepush
react-native link react-native-code-push
在app.js里面替换以下代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import CodePush from "react-native-code-push"; //引入code-push
let codePushOptions = {
//设置检查更新的频率
//ON_APP_RESUME APP恢复到前台的时候
//ON_APP_START APP开启的时候
//MANUAL 手动检查
checkFrequency : CodePush.CheckFrequency.ON_APP_START
};
const instructions = Platform.select({
ios: '现在是5.16 15：40分',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
class App extends Component {
//如果有更新的提示
syncImmediate() {
CodePush.sync( {
//安装模式
//ON_NEXT_RESUME 下次恢复到前台时
//ON_NEXT_RESTART 下一次重启时
//IMMEDIATE 马上更新
installMode : CodePush.InstallMode.IMMEDIATE ,
//对话框
updateDialog : {
//是否显示更新描述
appendReleaseDescription : true ,
//更新描述的前缀。 默认为"Description"
descriptionPrefix : "更新内容：" ,
//强制更新按钮文字，默认为continue
mandatoryContinueButtonLabel : "立即更新" ,
//强制更新时的信息. 默认为"An update is available that must be installed."
mandatoryUpdateMessage : "必须更新后才能使用" ,
//非强制更新时，按钮文字,默认为"ignore"
optionalIgnoreButtonLabel : '稍后' ,
//非强制更新时，确认按钮文字. 默认为"Install"
optionalInstallButtonLabel : '后台更新' ,
//非强制更新时，检查到更新的消息文本
optionalUpdateMessage : '有新版本了，是否更新？' ,
//Alert窗口的标题
title : '更新提示'
} ,
} ,
);
}
componentWillMount() {
CodePush.disallowRestart();//页禁止重启
this.syncImmediate(); //开始检查更新
}
componentDidMount() {
CodePush.allowRestart();//在加载完了，允许重启
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
<Text style={styles.instructions}>
这是更新的版本
</Text>
</View>
);
}
}
//这一行是必须的
App = CodePush( codePushOptions )( App );
export default App;
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,
},
});
到此 RN 已经 集成成功codepush
IOS集成codePush
使用Xcode打开项目，Xcode的项目导航视图中的PROJECT下选择你的项目，选择Info页签 ，在Configurations节点下单击 + 按钮 ，选择Duplicate "Release Configaration，输入Staging
6342050-fbfc9b79199d4a3f..jpg.png
选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，
将之前的值：
值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
改为：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)
6342050-369c31244b0f528f..jpg.png
选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY。
特别注意: Release 和 Staging的值为前面CodePush创建项目时显示的查询Production跟StagingKey
6342050-663dc2df47438cc5..jpg.png
打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)，并修改Bundle versions为三位1.0.0
6342050-c4392091edc647a0..jpg.png
在cocoaPod 里面添加:
pod 'CodePush', :path => '../node_modules/react-native-code-push'
获取热更新连接
#import <CodePush/CodePush.h>
jsCodeLocation= [CodePush bundleURL];
//之前是：jsCodeLocation=[[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
这个时候IOS环境就集成完毕。
Staging环境为codepush热更新的测试环境 类似Xcode的debug模式。之后发布热更新典型的流程是先发在staging环境下没问题了在发布到Production环境
直接运行Staging环境会报寻找不到第三方库Base64
先运行Release环境之后会提示是否需要自动设配之前导入的第三方库。点击 是， 之后Staging环境就不会报错了。
发布热更新
非常重要：先在RN项目的根目录创建文件夹 bundle 在bundle里面在创建ios文件夹
生成main.jsbundle包：
生成bundle命令 react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
例子：
react-native bundle --entry-file index.js --bundle-output ./bundle/ios/main.jsbundle --platform ios --assets-dest ./bundle/ios --dev false
将生成的main.jsbundle拖入ios项目中
将main.jsbundle上传到codepush服务器
code-push release-react <AppName> <Platform> --t <填写IOS项目版本号> --des <本次更新说明>
**注意:**CodePush默认是更新Staging 环境的，如果发布生产环境的更新包，需要指定--d参数：--d Production，如果发布的是强制更新包，需要加上 --m true强制更新
例子：
code-push release-react codePushDemo ios --t 1.0.0 --dev false --des "这是第一个更新包" --m true
巨坑出现： 填写IOS项目版本号！！！ 填写IOS项目版本号！！！IOS项目版本号是多少就填多少！！！！
查看上传历史记录
//查询Production
code-push deployment history <AppName> Production
//查询Staging
code-push deployment history <AppName> Staging
之后版本更新 需要重新打包main.jsbundle 在将main.jsbundle发到codepush上去。
