React Native项目更新

作者: 巨巨 | 来源:发表于2016-01-20 17:57 被阅读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应用下载

    相关文章

      网友评论

      • ronniegong:请问,文中如下修改Android端代码后,是不是每次应用启动时都会从codepush请求jsbundle了
        能否做到首次启动加载打包进apk的离线jsbundle,之后再启动才检查有无更新呢?
        // 原来这行 --> .setBundleAssetName("index.android.bundle")
        // 修改成如下:
        .setJSBundleFile(codePush.getBundleUrl("index.android.bundle"))
        ronniegong:@ronniegong 看了CodePush.java相关方法,加载jsbundle路径调用下面方法,方法首先判断本地有没有codepush下载的文件夹,如果没有则使用apk中原离线jsbundle
        public String getJSBundleFileInternal(String assetsBundleFileName) {
      • 许漠颜:npm install react-native-code-push 这个命令一直运行,请指教什么原因。
        巨巨:@许漠颜 应该是网络问题,可以安装nrm,然后切换到taobao的软件源。一般会快些。
        许漠颜:@6e038567092d 可能是吧,使用init直接创建了一个项目,现在就是先了解一下。真正实用的时候有问题再请教吧。我看了篇博客上说热更新在sdk里不能使用,但是想了想应该是可以使用的。只是没有时间去验证,等真正使用的时候有问题再和你交流吧。 :smile:
        6e038567092d:@许漠颜 网的问题吧
      • 含泪若笑:你好,我能问一下——这里需要先用code-push命令创建应用。创建后会有应用的Deployment Key这句话是什么意思啊,在哪里可以创建啊
        巨巨:@hanleirx 不太明白你说的问题。用release之后不行么
        含泪若笑:@巨巨 嗯嗯 谢谢 解决了,但我不知道怎么去更新,iOS升级这个地方?这是升级的操作吗?还是,可以具体说一下吗
        巨巨:用命令行创建,建议先看看code-push官方文档哈

      本文标题:React Native项目更新

      本文链接:https://www.haomeiwen.com/subject/lhzihttx.html