React Native CodePush集成

author: ImL1s

email: ImL1s@outlook.com

github: 专案

参考

简书:热更新CodePushXcode 应用程式构建阶段（Build Phases）分析Xcode如何设置在编译前自动运行脚本React Native用CodePush实现热更新(一) - CSDN博客React Native用CodePush实现热更新(二) - CSDN博客官方 Github-React Native iOS Setup

版本

react-native-cli: 2.0.1react-native: 0.53.0code-push: 2.1.6

前置作业

注册CodePush

安装CodePush CLI

 > npm install -g code-push-cli > code-push -v 2.1.6 // 有显示版本号代表安装成功

向CodePush注册App

 > code-push app add CodePushIntergradation ios react-native ┌────────────┬──────────────────────────────────────────────────────────────────┐ │ Name       │ Deployment Key                                                   │ ├────────────┼──────────────────────────────────────────────────────────────────┤ │ Production │ xxxxs2KwnRds65xxxxbp2GpYF78h3bxxxx1f-xxxx-xxxx-bba3-5a79beaxxxxd │ ├────────────┼──────────────────────────────────────────────────────────────────┤ │ Staging    │ xxxxgs9s-QBRsxxxxGxxxxGGxxhxxxx467xf-xxx3-430a-bba3-5a7xxxx95xxx │ └────────────┴──────────────────────────────────────────────────────────────────┘

公有云的CodePush集成到新的iOS专案(OC)

新建一个React Native专案

 react-native init codePushIntergradation

在新建的React Native目录下,使用npm安装CodePush

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

再run一次安装

 npm install

执行以下指令,会打开浏览器访问M$的app center,按照步骤登入或是注册

 > code-push register

上面的步骤完毕,在浏览器中可以得到一串金钥

 fxxxdd9caxxxxxxadxxxc3xxxc9904xxxd5xxx1x

将金钥输入到终端机中,他会将session文件存在~/.code-push.config

 Successfully logged-in.  Your session file was written to /Users/userName/.code-push.config.  You can run the code-push logout command at any time to delete this file and terminate your session.

接着输入以下指令,证明你已经登入了

 > code-push login [Error]  You are already logged in from this machine.

接着安装帮原生的iOS/Android专案安装CodePush的lib,deployment key先不用输入,按Enter就好

 > react-native link react-native-code-push Scanning folders for symlinks in /Users/UserName/Project/IOS/CodePushIntergradation/node_modules (18ms) ? What is your CodePush deployment key for Android (hit <ENTER> to ignore)  rnpm-install info Linking react-native-code-push android dependency  rnpm-install info Android module react-native-code-push has been successfully linked  rnpm-install info Linking react-native-code-push ios dependency  rnpm-install info iOS module react-native-code-push has been successfully linked  Running ios postlink script ? What is your CodePush deployment key for iOS (hit <ENTER> to ignore)  Running android postlink script

在iOS专案中,使用Source Code方式打开info.plist,在里面新增or更改CodePushDeploymentKey这个key的值为向CodePush注册的Staging key(在上面前置作业申请的)

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> ... ... <key>CodePushDeploymentKey</key> <string>iGexxx9s-Qxxx1xxxGkxxxGxxxhF3xxx67xx-xxxx-43xx-xxxx-xxxxxxx9xxxd</string> </dict> </plist>

接着打开AppDelegate.m,可以看到以下程式码,cli工具已经帮我们把RCTRootView(React Native JS的运行容器)更新的Code都写好了

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{......#ifdef DEBUG        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];    #else        jsCodeLocation = [CodePush bundleURL];    #endif    RCTRootView *rootView =     [[RCTRootView alloc]     initWithBundleURL:jsCodeLocationmoduleName:@"codePushIntergradation"initialProperties:nillaunchOptions:launchOptions];   ...   ...}

接着我们还要设定iOS的http访问权限,打开info.plist,把CodePush的Url加入进去

<plist version="1.0">  <dict>    <!-- ...other configs... -->    <key>NSAppTransportSecurity</key>    <dict>      <key>NSExceptionDomains</key>      <dict>        <key>codepush.azurewebsites.net</key>        <dict><!-- read the ATS Apple Docs for available options --></dict>      </dict>    </dict>    <!-- ...other configs... -->  </dict></plist>

将React Native的index.js改成以下

import { AppRegistry } from 'react-native';import App from './App';import codePush from "react-native-code-push";AppRegistry.registerComponent('codePushIntergradation', () => codePush(App));

接着用Release模式Run,一定要Release喔,不然他只会读local的js

xcode怎么找到最新的React Native js的呢?因为Xcode里,react-native cli工具帮我们配置了一个run script,可以切到以下地方,找到一个.sh的script,这个script会在Copy Bundle Resources之后将打包好的js放到ipa中(可以参考开头参考的连结)

点击项目 -> TARGETS -> {{porject name}} -> BuildPhases ->Bundle React Native code and images

接着修改React Native的app.js

export default class App extends Component<Props> {  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>         Hello code push!!        </Text>        <Text style={styles.instructions}>          To get started, edit App.js        </Text>        <Text style={styles.instructions}>          {instructions}        </Text>      </View>    );  }}

接着要把React Native专案下的package.json版本号更新,不然不给上传

{  "name": "codePushIntergradation",  "version": "0.0.2",  "private": true,  "scripts": {    "start": "node node_modules/react-native/local-cli/cli.js start",    "test": "jest"  },  "dependencies": {    "react": "16.2.0",    "react-native": "0.53.0",    "react-native-code-push": "^5.2.1"  },  "devDependencies": {    "babel-jest": "22.2.0",    "babel-preset-react-native": "4.0.0",    "jest": "22.2.1",    "react-test-renderer": "16.2.0"  },  "jest": {    "preset": "react-native"  }}

接着将写好的js打包,并且发布到远端Server上,这句command做两个动作,打包React Native专案并且上传到Code push

> code-push release-react {{Your project name}} ios 

重新打开app两次(滑掉重开),然后可就可以看到更新,至于为什么要两次呢...?我猜是为了用户体验,第一次检查到更新先存着,等到下一次再更新

常用指令

初始化阶段：1:npm install -g code-push-cli 安装客户端2:code-push -v 查看是否安装成功3:code-push register 在codepush注册账号4:code-push login5:code-push app add <appName> <android/ios> react-native 添加app例如code-push app add test android react-native6:code-push app list 列出app列表code-push deployment ls <appName> -k 查看APP的keycode-push deployment history <appName> Porduction/Staging例如：code-push deployment history test Production7:yarn add react-native-code-push 在rn项目下安装codepush8:react-native link react-native-code-push 链接codepush