React Native-Pushy热更新

参考官网

• 一 安装

• 1. 安装

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

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

• 2. 手动和自动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

• 3. 配置Bundle URL(iOS)

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

• 5. 工程中添加代码

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

• 6. 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>

  

• 二 登录与创建应用

• 1. 注册

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

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

• 2. 创建App

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

• 3. 添加代码热更新功能

  • 获取appKey

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

• 4. 主要代码

 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('提示', '刚刚更新失败了,版本被回滚.');    }  }

• 5. 打包

  • 打包之前先在工程中打离线包
  • 根目录有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/

• 6. 发布应用

 pushy uploadIpa <your-package.ipa>

• 7. 发布新的热更新版本

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

 pushy bundle --platform ios

• 之后根据终端提示操作

 $ pushy bundle --platform <ios|android>Bundling with React Native version:  0.22.2<各种进度输出>Bundled saved to: build/output/android.1459850548545.ppkWould you like to publish it?(Y/N) 输入Y  Uploading [========================================================] 100% 0.0sEnter 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)输入Y9168) 2.3.0(normal) (newest)Total 1 packages.Enter packageId: 9168Ok.

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