參考官網(wǎng)

• 安裝

  • 在你的項(xiàng)目根目錄下運(yùn)行以下命令：(根目錄通常為帶有package.json的)

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

• 手動(dòng)和自動(dòng)link

• a. 如果項(xiàng)目為純RN項(xiàng)目執(zhí)行以下命令

react-native link react-native-update

• b. 如果是RN植入到iOS原生項(xiàng)目,經(jīng)測試link無用,用cocopods自動(dòng)鏈接
  • 找到node_modules->react-native-update

touch react-native-update.podspec

• 在react-native-update.podspec這個(gè)文件中編輯

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例外配置

  • 右鍵點(diǎn)擊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

• 登錄與創(chuàng)建應(yīng)用

  • 注冊賬號(hào)
  • 在根目錄輸入

pushy login
email: <輸入你的注冊郵箱>
password: <輸入你的密碼>

• 創(chuàng)建App

pushy createApp --platform ios
App Name: <輸入應(yīng)用名字>

• 添加代碼熱更新功能

  • 獲取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('提示', '下載完畢,是否重啟應(yīng)用?', [
       {text: '是', onPress: ()=>{switchVersion(hash);}},
       {text: '否',},
       {text: '下次啟動(dòng)時(shí)', onPress: ()=>{switchVersionLater(hash);}},
     ]);
   }).catch(err => { 
     Alert.alert('提示', '更新失敗.');
   });
 };

• 檢查更新

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

• 設(shè)置markSuccess 如果不設(shè)置會(huì)代碼回滾

  if (isFirstTime) {
     Alert.alert('提示', '這是當(dāng)前版本第一次啟動(dòng),是否要模擬啟動(dòng)失敗?失敗將回滾到上一版本', [
       {text: '是', onPress: ()=>{throw new Error('模擬啟動(dòng)失敗,請重啟應(yīng)用')}},
       {text: '否', onPress: ()=>{markSuccess()}},
     ]);
   } else if (isRolledBack) {
     Alert.alert('提示', '剛剛更新失敗了,版本被回滾.');
   }
 }

• 打包

  • 打包之前先在工程中打離線包
  • 根目錄有release_ios文件夾，沒有的話創(chuàng)建一個(gè)
  • 打包程序?qū)С鰅pa文件
  • 注意:update.json 需要跟你的js文件在一個(gè)目錄下 否則會(huì)找不到文件 也有可能我引入的路徑問題

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

• 發(fā)布應(yīng)用

pushy uploadIpa <your-package.ipa>

• 發(fā)布新的熱更新版本

  • 程序代碼修改后進(jìn)行更新

pushy bundle --platform ios

• 之后根據(jù)終端提示操作

$ pushy bundle --platform <ios|android>
Bundling with React Native version:  0.22.2
<各種進(jìn)度輸出>
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是返回的四位數(shù)字(9168)