ReactNative最新版热更新(实力干货)

这边使用的是微软的codePush

根据下面网址作为参考,然后自己配置把踩的坑给填了,记录一下
https://github.com/microsoft/react-native-code-push/blob/master/docs/setup-ios.md

在RN工程根目录下终端中输入yarn add react-native-code-push,目的是为了在node_modules目录下安装react-native-code-push

以下是iOS工程下的配置

在iOS工程下的podfile文件中加入这句话
pod 'CodePush', :path => '../node_modules/react-native-code-push'
(该路径根据自己的目录来,如果ios文件下直接就是工程,用上面方法即可。如果ios文件下还有一个文件夹,然后该文件夹下是工程,那么就用'../../node_modules/react-native-code-push')
然后执行
pod install
执行成功后会在你的pod中还另外安装了3个库
JWT
Base64
SSZipArchive
如果xcode运行报错的话,可以考虑下是否这3个新加的库在你工程本身中已经存在了,而导致的冲突。
然后在iOS代码中,导入头文件#import <CodePush/CodePush.h>

NSURL *jsCodeLocation;
#if DEBUG
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
jsCodeLocation = [CodePush bundleURLForResource:@"main" withExtension:@"jsbundle" subdirectory:@"bundle"];
#endif
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                            moduleName: @"ptm"
                     initialProperties:nil
                         launchOptions: nil];
JLBRNViewController2 *vc = [[JLBRNViewController2 alloc] init];
vc.view = rootView;
[self.navigationController pushViewController:vc animated:YES];

选择Build Settings tab,点击 + 号,选择Add User-Defined Setting,将key设置为CODEPUSH_KEY,Release 和 Staging的值为前面创建的key,我们直接复制进去即可(Staging可以不添加)


iOS配置RN.png

打开Info.plist文件,在CodePushDeploymentKey中输入$(CODEPUSH_KEY)


然后修改Bundle versions为三位(比如1.0改成1.0.0)


以下是React Native工程下的配置

首先要对RN工程打包

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/PTM/bundle/main.jsbundle --assets-dest ./ios/PTM/bundle(ios/PTM/bundle这个是自己的路径,可以根据自己情况改变。一般情况下直接ios/bundle)

--entry-file ,ios或者android入口的js名称,比如index.js
--platform ,平台名称(ios或者android)
--dev ,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称,比如./ios/bundle/index.ios.jsbundle
--assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

离线包生成完成之后,可以在ios目录下看到一个bundle目录,这个目录就是bundle生成的离线资源。

需要在Xcode中添加资源到项目中,必须使用Create folder references的方式添加文件夹.


以下是RN的代码

class App extends React.Component {
  syncImmediate() {
    const updateMessage = CodePush.checkForUpdate() || {};
    CodePush.sync(
    {
    //安装模式
    //ON_NEXT_RESUME 下次恢复到前台时
    //ON_NEXT_RESTART 下一次重启时
    //IMMEDIATE 马上更新
    mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,
    // deploymentKey:
    //   'gwaRE9SPQklEZfICS28F5Gp80_Jt516fb840-58a4-4faf-8f17-0700897bd7ed',
    deploymentKey:
    'Y6LFSjUDhvxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      //对话框
      updateDialog: {
        //是否显示更新描述
        appendReleaseDescription: true,
        //更新描述的前缀。 默认为"Description"
        descriptionPrefix: '更新内容:',
        //强制更新按钮文字,默认为continue
        mandatoryContinueButtonLabel: '立即更新',
        //强制更新时的信息. 默认为"An update is available that must be installed."
        mandatoryUpdateMessage: '必须更新后才能使用',
        //非强制更新时,按钮文字,默认为"ignore"
        optionalIgnoreButtonLabel: '稍后',
        //非强制更新时,确认按钮文字. 默认为"Install"
        optionalInstallButtonLabel: '后台更新',
        //非强制更新时,检查到更新的消息文本
        optionalUpdateMessage: '有新版本了,是否更新?',
        //Alert窗口的标题
        title: '更新提示',
      },
    },
    status => {
      switch (status) {
        case 0:
          alert('已经是最新版本');
          break;
        case 1:
          !updateMessage.isMandatory &&
           alert('更新完成, 再启动APP更新即生效');
          break;
        case 3:
          alert('出错了,未知错误');
          break;
        case 7:
          this.setState({showProcess: true});
          break;
        case 8:
          this.setState({showProcess: false});
          break;
        }
      },
    );
  }
  componentWillMount() {
    CodePush.disallowRestart(); //禁止重启
    this.syncImmediate(); //开始检查更新
  }
  componentDidMount() {
    CodePush.allowRestart(); //在加载完了,允许重启
  }
  render() {
    return (
      <Provider store={store}>
        <HomeApp />
      </Provider>
    );
  }
}
export default CodePush(codePushOptions)(App);

然后是自己如何部署一个code push 云服务器
安装code-push CLI输入
npm install -g code-push-cli
接着注册
code-push register
我们根据提示注册成功后,将获得一个码,我们将这个码填入终端中,之后即登录成功
登录成功后,为了让CodePush服务器有我们的App,我们需要CodePush注册App。这里需要注意如果我们的应用分为iOS和Android两个平台,这时我们需要分别注册两套key。系统默认有两套部署环境,一个是Production和Staging,分别对应生产版的热更新部署,Staging代表开发版的热更新部署,但是我们也可以自定义添加部署环境。
添加应用平台 code-push app add <app_name> <os> <platform>
例如添加iOS平台 $ code-push app add PTM ios react-native,多个平台执行多次
成功之后会输出
│ Name │ Deployment Key
│ Production │ Y6LFSjUDxxxxxxxxxxxxxxxxxxxx
│ Staging │ eVa_f_af_dSxxxxxxxxxxxxxxxxxxx
我们将这个key,写入对应的地方(之前举例的RN代码和iOS代码中)

然后输入
code-push release-react PTM ios --t 1.0.0 --dev false --des '再来2次试试' --d Production --mandatory true
这样我们就成功上传到code push 云服务器上了,这样用户打开对应的界面,就会有更新提示了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容