RN-热更新-pushy

参考官网

• 安装

  • 在你的项目根目录下运行以下命令：(根目录通常为带有package.json的)

npm install -g react-native-update-cli rnpm
npm install --save react-native-update

• 手动和自动link

• a. 如果项目为纯RN项目执行以下命令

react-native link react-native-update

• b. 如果是RN植入到iOS原生项目,经测试link无用,用cocopods自动链接
  • 找到node_modules->react-native-update

touch react-native-update.podspec

• 在react-native-update.podspec这个文件中编辑

require "json"
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
Pod::Spec.new do |s|
s.name = "react-native-update"
s.version = package["version"]
s.summary = "hot update for react-native"
s.author = "author (https://github.com/reactnativecn)"
s.homepage = "https://github.com/reactnativecn/react-native-pushy"
s.license = "MIT"
s.platform = :ios, "7.0"
s.source = { :git => "https://github.com/reactnativecn/react-native-pushy.git", :tag => "#{s.version}" }
s.source_files = "ios/**/*.{h,m,c}"
s.libraries = "bz2"
s.dependency "React"
end

• 在Podfile中添加路径

pod 'react-native-update' , :path => './node_modules/react-native-update'
      pod update

• 配置Bundle URL(iOS)

• 在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd

• 添加代码

#import "RCTHotUpdate.h"
#if DEBUG
  // 原来的jsCodeLocation
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
  jsCodeLocation=[RCTHotUpdate bundleURL];
#endif

• iOS的ATS例外配置

  • 右键点击Info.plist，选择open as - source code

<key>NSAppTransportSecurity</key>
<dict>
   <key>NSExceptionDomains</key>
   <dict>
       <key>reactnative.cn</key>
       <dict>
           <key>NSIncludesSubdomains</key>
           <true/>
           <key>NSExceptionAllowsInsecureHTTPLoads</key>
           <true/>
       </dict>
  </dict>
</dict>

image

• 登录与创建应用

  • 注册账号
  • 在根目录输入

pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>

• 创建App

pushy createApp --platform ios
App Name: <输入应用名字>

• 添加代码热更新功能

  • 获取appKey

import {
 Platform,
} from 'react-native';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

• 主要代码

import {
 Linking,
} from 'react-native';
import {
 isFirstTime,
 isRolledBack,
 packageVersion,
 currentVersion,
 checkUpdate,
 downloadUpdate,
 switchVersion,
 switchVersionLater,
 markSuccess,
} from 'react-native-update';

• 下载

  doUpdate = info => {
   downloadUpdate(info).then(hash => {
     Alert.alert('提示', '下载完毕,是否重启应用?', [
       {text: '是', onPress: ()=>{switchVersion(hash);}},
       {text: '否',},
       {text: '下次启动时', onPress: ()=>{switchVersionLater(hash);}},
     ]);
   }).catch(err => { 
     Alert.alert('提示', '更新失败.');
   });
 };

• 检查更新

  checkUpdate = () => {
   checkUpdate(appKey).then(info => {
     if (info.expired) {
       Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [
         {text: '确定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}},
       ]);
     } else if (info.upToDate) {
       Alert.alert('提示', '您的应用版本已是最新.');
     } else {
       Alert.alert('提示', '检查到新的版本'+info.name+',是否下载?\n'+ info.description, [
         {text: '是', onPress: ()=>{this.doUpdate(info)}},
         {text: '否',},
       ]);
     }
   }).catch(err => { 
     Alert.alert('提示', '更新失败.');
   });
 };

• 设置markSuccess 如果不设置会代码回滚

  if (isFirstTime) {
     Alert.alert('提示', '这是当前版本第一次启动,是否要模拟启动失败?失败将回滚到上一版本', [
       {text: '是', onPress: ()=>{throw new Error('模拟启动失败,请重启应用')}},
       {text: '否', onPress: ()=>{markSuccess()}},
     ]);
   } else if (isRolledBack) {
     Alert.alert('提示', '刚刚更新失败了,版本被回滚.');
   }
 }

• 打包

  • 打包之前先在工程中打离线包
  • 根目录有release_ios文件夹，没有的话创建一个
  • 打包程序导出ipa文件
  • 注意:update.json 需要跟你的js文件在一个目录下 否则会找不到文件 也有可能我引入的路径问题

react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

• 发布应用

pushy uploadIpa <your-package.ipa>

• 发布新的热更新版本

  • 程序代码修改后进行更新

pushy bundle --platform ios

• 之后根据终端提示操作

$ pushy bundle --platform <ios|android>
Bundling with React Native version:  0.22.2
<各种进度输出>
Bundled saved to: build/output/android.1459850548545.ppk
Would you like to publish it?(Y/N) 
输入Y
 Uploading [========================================================] 100% 0.0s
Enter version name: <输入版本名字，如1.0.0-rc>
Enter description: <输入版本描述>
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)
输入Y
9168) 2.3.0(normal) (newest)
Total 1 packages.
Enter packageId: 9168
Ok.

• 注意:packageId是 bind是返回的四位数字(9168)