React.js专题站ReactNativeHybird开发

React Native项目更新

2016-01-20  本文已影响2417人  巨巨

下面介绍一个React Native的一个插件CodePush,可进行应用内版本更新。

该插件是微软针对开发者提供的一个工具。项目详细地址请戳项目github

在使用时,请注意按照文档流程来做,同时RN版本需要是>=0.15。低版本RN该组件目前支持还有一些问题,同时开发者已不准备支持低版本了。

安装

1) iOS平台安装

npm install react-native-code-push
将node_modules/react-native-code-push中的CodePush.xcodeproj添加至Xcode中的Libraries里。
在Build Phases中添加libCodePush.a和libz.tbd
设置Header Search Paths配置,添加$(SRCROOT)/../node_modules/react-native-code-push

2) Android平台安装

react-native link react-native-code-push

注:此link后还会有些问题。需要修改settings.gradle中为:
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

程序调用

在程序调用前,需要用code-push创建应用。建议创建2个,分别针对iOS和Android平台。

1) iOS上调用

在AppDelegate.m中导入CodePush.h
同时修改jsCodeLocation为[CodePush bundleURL]

这里需要先用code-push命令创建应用。创建后会有应用的Deployment Key。该值需要在Info.plist中进行设置。在info.plist中添加CodePushDeploymentKey并设置内容为上述的key值。也需要在Info.plilst中添加bundleVersion值,需要具体指定到很小的版本号,如1.0.10.

2) Android上调用

在link之后,已经会将需要的包和处理方式导入到MainActivity.java中了。如果没有code-push相关的代码。则手动导入。

import com.microsoft.codepush.react.CodePush;

@Override protected void onCreate(Bundle savedInstanceState) { 
    ... //  初始化信息
    CodePush codePush = new CodePush("xxx", this, BuildConfig.DEBUG);
    ...
    mReactInstanceManager = ReactInstanceManager.builder()
        .setApplication(getApplication()) 
    ... 
    //  原来这行 --> .setBundleAssetName("index.android.bundle") 
    // 修改成如下:
        .setJSBundleFile(codePush.getBundleUrl("index.android.bundle")) 
    // 导入模块
        .addPackage(codePush.getReactPackage())

修改android/app/build.gradle目录中的版本信息为:

android { 
    ... 
    defaultConfig { 
      ... 
      versionName "1.0.10" 
      ... 
    } 
 ...
 }

升级操作

分别创建了两个CodePush应用:MyDemo(iOS平台)和MyDemo-android(Android平台)。
对应的目录release和release_android需要先创建.

mkdir release release_android

1) iOS升级

react-native bundle --platform ios --entry-file index.ios.js  --bundle-output ./release/main.jsbundle --assets-dest ./release --dev false
code-push release MyDemo ./release/main.jsbundle 1.0.10 

注意:后面的1.0.10需要在bundleVersion里填写,同时后续更新的时候该条命令的版本号不可更新,这样移动端应用内更新才能有效。

2) Android升级

react-native bundle --platform android --entry-file index.android.js  --bundle-output ./release_android/main.jsbundle --assets-dest ./release_android --dev false
code-push release MyDemo-android ./release_android/main.jsbundle 1.0.10 

注意打包的目录也不一样。会涉及到静态资源问题。

在RN中可以用JS做以下操作

chekForUpdate 检查是否有新版
getCurrentPackage 获取当前安装的包
notifyApplicationReady 告知应用已准备好
restartApp 重启应用,下载包立即安装时会用到
sync  异步下载新的安装包,可设置是否立即安装等。

除了微软的这个组件。也可以用AppHub管理版本。AppHub是一个收费的管理平台,针对RN、cordova等类型的应用。

推荐:
RNTools是一个分享React Native文章、实例代码以及第三方模块的平台。RNTools官网链接 RNTools应用下载

上一篇下一篇

猜你喜欢

热点阅读