React Native-Pushy热更新

参考官网

• 一 安装

• 1. 安装

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

npm install -g react-native-update-cli rnpm
npm 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 login
email: <输入你的注册邮箱>
password: <输入你的密码>

• 2. 创建App

pushy createApp --platform ios
App 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.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)