[ReactNative集成CodePush教程][三] 集成Code Push的案例说明

ReactNative集成CodePush教程集合

[一] 注册CodePush准备工作

[二] 集成Code Push到项目工程里

[三] 集成Code Push的案例说明

转载请保留出处：http://blog.csdn.net/mad2man

1. 新建一个工程，叫做CodePushDemo.

 根据上一篇文章的集成步骤，将CodePush 集成到工程里面。

 

2. 集成CodePush成功后，我们开始修改一下ReactNative界面显示。

这里让界面显示一张图片，以及显示该APP代码的版本。

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
 
import codePush from "react-native-code-push";
 
class CodePushDemo extends Component {
   
  componentDidMount() {
    codePush.sync();
  }
 
  render() {
    return (
      <View style={styles.container}>
        <Image
        style={{width: 178, height: 243}}
        source={{uri: "http://7xiunj.com1.z0.glb.clouddn.com/caoyuan.jpg"}}/>
        <Text style = {{marginTop: 20, fontSize: 18}}>版本：1.0.0
        </Text>
        <Text style = {{marginTop: 20, fontSize: 18}}>JS 版本：0.0.1
        </Text>
      </View>
    );
  }
}

3. 以上代码，运行后的界面为：

 

 

 

4. 这个时候我们更改js代码，将版本提升为0.0.2，并且更改图片的uri地址。

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
 
import codePush from "react-native-code-push";
 
class CodePushDemo extends Component {
   
  componentDidMount() {
    codePush.sync();
  }
 
  render() {
    return (
      <View style={styles.container}>
        <Image
        style={{width: 178, height: 243}}
        source={{uri: "http://7xiunj.com1.z0.glb.clouddn.com/doubi.jpg"}}/>
        <Text style = {{marginTop: 20, fontSize: 18}}>版本：1.0.0
        </Text>
        <Text style = {{marginTop: 20, fontSize: 18}}>JS 版本：0.0.2
        </Text>
      </View>
    );
  }
}

5. 将新修改的JS打包成一个资源包。

这里的fixBundle是创建到根目录的一个文件夹而已。

打包JS

react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./fixbundle/ddys_fix_0.0.2.jsbundle --dev  false

 

 

 

6. 将打包的JSBundle 提交到 CodePush 的后台

 

成功提交后查看可得到一下信息

 

7. 之后我们再次运行 1.0.0 版本的App，可以发现会自动检测到升级

 

更新后都需要重启才能看到最新的变化，这里我们重启一下应用，可以发现界面变化了。 

以上就是CodePush的集成以及使用的步奏方法，仅供各位参考。下面是将一些遇到的坑，以及一些知识点说明一下：

iOS 工程里面的 Bundle versions string，short 一定要三位数（如：1.0.0），不能是两位数（如 1.0）。

js是否跟新，取决于 提交到 codePush的时候，所使用的 appversion。

iOS版本	CodePush提交的release 版本
1.0.0	1.0.0	会自动下载
0.0.9	1.0.0	An update is available but it is targeting a newer binary version than you are currently running. 较新版本，不会自动下载
1.0.1	1.0.0	不作处理

纯JS文件打包： 

react-native bundle --parameter ios --entry-file index.ios.js --bundle-output ./bundles/SwitchCheck010000.jsbundle —dev flase

JS文件、图片文件打包：

react-native bundle --parameter ios --entry-file index.ios.js --bundle-output ./bundles/SwitchCheck010000.jsbundle --assets-dest ./bundles  —dev flase

发布： 

Usage: code-push release <appName> <updateContentsPath> <targetBinaryVersion> [options]

选项：

  --deploymentName, -d  Deployment to release the update to  [string] [默认值: "Staging"]

  --description, --des  Description of the changes made to the app in this release  [string] [默认值: null]

  --disabled, -x        Specifies whether this release should be immediately downloadable  [boolean] [默认值: false]

  --mandatory, -m       Specifies whether this release should be considered mandatory  [boolean] [默认值: false]

  --rollout, -r         Percentage of users this release should be available to  [string] [默认值: "100%"]

示例：

  release MyApp app.js "*"                                    

Releases the "app.js" file to the "MyApp" app's "Staging" deployment, targeting any binary version using the "*" wildcard range syntax.

  release MyApp ./platforms/ios/www 1.0.3 -d Production       

Releases the "./platforms/ios/www" folder and all its contents to the "MyApp" app's "Production" deployment, targeting only the 1.0.3 binary version

  release MyApp ./platforms/ios/www 1.0.3 -d Production -r 20 

Releases the "./platforms/ios/www" folder and all its contents to the "MyApp" app's "Production" deployment, targeting the 1.0.3 binary version and rolling out to about 20% of the users