iOS原有项目中添加热更新(方式一pushy:react-native-update)

前言

做这个之前要保证你的项目中已经集成了ReactNative：

npm install

pod install

1. 首先一定要保证HomeBrew和Node是最新版本(如果是最新下面两个可以不用执行)：

升级HomeBrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

升级Node

brew upgrade node

npm install -g react-native-update-cli (一台电脑只运行一次就行)

npm install --save react-native-update@具体版本（具体版本请参考下面的表格-安装事例：npm install --save [email protected]）

React Native版本      react-native-update版本
0.26及以下             1.0.x
0.27 - 0.28           2.x
0.29 - 0.33           3.x
0.34 - 0.45           4.x
0.46及以上             5.x

检查成功的标志是：项目中有了libRCTHotUpdate.a，后来经测试没有这个.a文件也可以，如图1：

1.png

3. 手动和自动link

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

react-native link react-native-update

• b. 如果是RN植入到iOS原生项目，经测试link无用，用cocopods自动链接。

cd到路径 node_modules->react-native-update创建react-native-update.podspec文件

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

4 . 在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd
在你的AppDelegate.m文件中增加如下代码：

#import "RCTHotUpdate.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#if DEBUG
  // 原来的jsCodeLocation
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
  jsCodeLocation=[RCTHotUpdate bundleURL];
#endif
  // ... 其它代码
}

5 . iOS的ATS例外配置

从iOS9开始，苹果要求以白名单的形式在Info.plist中列出外部的非https接口，以督促开发者部署https协议。在我们的服务部署https协议之前，请在Info.plist中添加如下例外（右键点击Info.plist，选择open as - source code）：

NSAppTransportSecurity

    NSExceptionDomains
    
        reactnative.cn
        
            NSIncludesSubdomains
            
            NSExceptionAllowsInsecureHTTPLoads
            
        
   

6.登录与创建应用

首先请在http://update.reactnative.cn注册帐号，然后在你的项目根目录下运行以下命令：

  $ pushy login

  email: <输入你的注册邮箱>

  password: <输入你的密码>

这会在项目文件夹下创建一个.update文件，注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。
登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建：

 $ pushy createApp --platform ios

 App Name: <输入应用名字>

两次输入的名字可以相同，这没有关系。
如果你已经在网页端或者其它地方创建过应用，也可以直接选择应用：

 $ pushy selectApp --platform ios

 1) A_app(ios)

 3) B_app(ios)

Total 2 ios apps

Enter appId: <输入应用前面的编号> 

选择或者创建过应用后，你将可以在文件夹下看到update.json文件，其内容类似如下形式：

{
    "ios": {
        "appId": 1,
        "appKey": "<一串随机字符串>"
    },
    "android": {
        "appId": 2,
        "appKey": "<一串随机字符串>"
    }
}

你可以安全的把update.json上传到Git等CVS系统上，与你的团队共享这个文件，它不包含任何敏感信息。当然，他们在使用任何功能之前，都必须首先输入pushy login进行登录。

遇到的问题:

报错: ReactComponentTreeHook.purgeUnmountedComponents is not a function

其实如果报了这个错，实在执行下面的时候:

$ npm install --save [email protected]

报了一句警告：

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

解决方法就是修改你现在安装的react版本为提示的版本：

$ yarn add [email protected]

参考文章：

RN-热更新-pushy
react-native-pushy准备工作
React Native-Pushy热更新