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

ReactNative集成CodePush教程集合

转载请保留出处：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,height: 243}}
        source={{uri: "http://7xiunj.com1.z0.glb.clouddn.com/doubi.jpg"}}/>
        <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	会自动下载
0.0.9	An update is available but it is targeting a newer binary version than you are currently running. 较新版本，不会自动下载
1.0.1	不作处理

纯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

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

ReactNative集成CodePush教程集合

相关文章