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,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是创建到根目录的一个文件夹而已。

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

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

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

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

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