玩轉RN：現有的IOS APP如何集成RN

寫在前面

react-native 你們都比較熟悉了，若是是一個全新的項目，直接使用 RN 的腳手架功能初始化項目就能夠，直到上架以前，前端的小夥伴可能都不怎麼須要關心 native 的代碼。

若是是在現有的IOS項目裏集成RN的支持，狀況會有所不一樣。咱們先看下一個集成了RN的IOS項目的大致架構，IOS應用集成RN的SDK，運行時加載預先打包好的jsBundle。

因而，將RN集成到現有的IOS應用裏，主要作幾個事情：

1. IOS APP 引入RN SDK
2. 添加前端業務代碼（最終打包成jsBundle）
3. 建立RN視圖，加載jsBundle
4. 將APP、RN視圖關聯起來

文中示例可在 筆者的gayhub 上找到，文中若有不清晰之處，可參考 RN 官方文檔。

環境描述

• watchman：4.9.0
• xcode：10.0 (10A255)
• pod：1.7.5
• react：16.8.0
• react-native：0.60.5

建立IOS項目

首先，『建立新項目』，選擇『單視圖應用』（若是已經有IOS項目，可跳過這一步）

填寫應用基礎信息，應用名稱爲 RNTest

RN集成：IOS項目引入 react-native SDK

安裝 react、react-native 依賴（核心依賴）

npm install react react-native
複製代碼

安裝cocopod、xcode工具，過程略，以下圖（可參考官方文檔，或google之）

建立目錄ios，並將 RNTest 下的全部文件拷貝到 ios 裏

mkdir ios
cp -rf RNTest項目的路徑/* ios
複製代碼

初始化 Podfile

cd ios && pod init
複製代碼

初始化後的 Podfile 以下

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNTest' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for RNTest

end
複製代碼

添加依賴的組件。

須要注意的是，對於react-native SDK不一樣版本，依賴的組件有所不一樣，包括依賴哪些組件、組件名（存在重命名的組件）、組件的描述文件路徑等。官方文檔的更新不是很及時，因此安裝出問題時，建議上google、github issue查一下。

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNTest' do
  # Comment the next line if you don't want to use dynamic frameworks
  # use_frameworks!

  # Pods for RNTest
  pod 'React', :path => '../node_modules/react-native/'
  
  # React-Core 依賴有問題，修改路徑
  # pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  
  # React-fishhook 不須要，先刪掉
  # pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  
  # RCTWebSocket 依賴有問題，修改路徑
  # pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
  

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  
  # 在新版本里，yoga 被重命名爲Yoga，須要注意
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 
end
複製代碼

安裝依賴：（過程起始沒有這麼順利，安裝過程遇到的問題在『問題解決』小節裏單獨說到）

Analyzing dependencies
Fetching podspec for `React` from `../node_modules/react-native/`
Fetching podspec for `React-Core` from `../node_modules/react-native/React`
Fetching podspec for `React-DevSupport` from `../node_modules/react-native/React`
Fetching podspec for `React-RCTActionSheet` from `../node_modules/react-native/Libraries/ActionSheetIOS`
Fetching podspec for `React-RCTAnimation` from `../node_modules/react-native/Libraries/NativeAnimation`
Fetching podspec for `React-RCTBlob` from `../node_modules/react-native/Libraries/Blob`
Fetching podspec for `React-RCTImage` from `../node_modules/react-native/Libraries/Image`
Fetching podspec for `React-RCTLinking` from `../node_modules/react-native/Libraries/LinkingIOS`
Fetching podspec for `React-RCTNetwork` from `../node_modules/react-native/Libraries/Network`
Fetching podspec for `React-RCTSettings` from `../node_modules/react-native/Libraries/Settings`
Fetching podspec for `React-RCTText` from `../node_modules/react-native/Libraries/Text`
Fetching podspec for `React-RCTVibration` from `../node_modules/react-native/Libraries/Vibration`
Fetching podspec for `React-RCTWebSocket` from `../node_modules/react-native/Libraries/WebSocket`
Fetching podspec for `React-cxxreact` from `../node_modules/react-native/ReactCommon/cxxreact`
Fetching podspec for `React-jsi` from `../node_modules/react-native/ReactCommon/jsi`
Fetching podspec for `React-jsiexecutor` from `../node_modules/react-native/ReactCommon/jsiexecutor`
Fetching podspec for `React-jsinspector` from `../node_modules/react-native/ReactCommon/jsinspector`
Fetching podspec for `yoga` from `../node_modules/react-native/ReactCommon/yoga`
Downloading dependencies
Using DoubleConversion (1.1.6)
Using Folly (2018.10.22.00)
Using React (0.60.5)
Using React-Core (0.60.5)
Using React-DevSupport (0.60.5)
Using React-RCTActionSheet (0.60.5)
Using React-RCTAnimation (0.60.5)
Using React-RCTBlob (0.60.5)
Using React-RCTImage (0.60.5)
Using React-RCTLinking (0.60.5)
Using React-RCTNetwork (0.60.5)
Using React-RCTSettings (0.60.5)
Using React-RCTText (0.60.5)
Using React-RCTVibration (0.60.5)
Using React-RCTWebSocket (0.60.5)
Using React-cxxreact (0.60.5)
Using React-jsi (0.60.5)
Using React-jsiexecutor (0.60.5)
Using React-jsinspector (0.60.5)
Using boost-for-react-native (1.63.0)
Using glog (0.3.5)
Using yoga (0.60.5.React)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 21 dependencies from the Podfile and 22 total pods installed.

[!] Automatically assigning platform `ios` with version `12.0` on target `RNTest` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
複製代碼

RN集成：添加RN前端入口代碼

添加入口文件 index.js

import React from 'react';
import {AppRegistry, StyleSheet, Text, View, Image} from 'react-native';

class RNTest extends React.Component {
  render() {
    return (
      <View style={styles.container}> <Text style={styles.title}>Hello 我是程序猿小卡.</Text> <Image style={styles.avatar} source={{uri: 'https://avatars3.githubusercontent.com/u/2383346?s=460&v=4'}} /> </View> ); } } const styles = StyleSheet.create({ container: { display: 'flex', alignItems: 'center', marginTop: 60 }, title: { fontSize: 20, textAlign: 'center', color: '#333' }, avatar: { width: 300, height: 300, marginTop: 20 } }); // Module name AppRegistry.registerComponent('RNTest', () => RNTest); 複製代碼

RN集成：建立、加載 RN 視圖

最後的環節，就是讓IOS應用加載RN View，這裏實現爲 『點擊按鈕後加載RN視圖』。

首先，點擊 Main.storyboard，在預覽視圖上，添加一個按鈕『加載RN視圖』，

接着，在 ViewController 中，添加事件響應代碼。首先，打開 ViewController.h，添加以下代碼

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

- (IBAction) rnTestButtonPressed:(id)sender; // 新增的代碼

@end
複製代碼

接着，打開 ViewController.m，添加以下代碼，注意，moduleName 跟 index.js 中的模塊名保持一致。

#import "ViewController.h"
#import <React/RCTRootView.h> // 新增的依賴

@interface ViewController ()

@end

@implementation ViewController

// 新增的事件響應方法
- (IBAction)rnTestButtonPressed:(id)sender {
    NSLog(@"RNTest Button Pressed");
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"RNTest"
                         initialProperties:
     @{}
                             launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}


- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSLog(@"viewDidLoad");
}


@end
複製代碼

將按鈕跟事件響應關聯起來。

RN集成：運行應用

首先，將RN應用打包成一個jsbundle。下面命令會在本地起個server，實時進行打包，jsbundle 的地址爲上面oc代碼裏的 http://localhost:8081/index.bundle?platform=ios。

npm start
複製代碼

接着，在xcode裏運行IOS應用。

點擊『加載RN視圖』，會看到有個加載jsbundle的過程，最後呈現RN的視圖。

寫在後面

如前面提到，RN不一樣版本SDK，pod依賴有所不一樣，官網可能跟新不及時，只能google一下找解決方案，這個過程仍是有點麻煩的。好比 React-Core 的路徑就有問題：

#React-Core 依賴有問題，修改路徑
# pod 'React-Core', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
複製代碼

筆者最初安裝的版本是 0.61.14，依賴報錯比較多，改得多了，因而先回退到 0.60.5，新版本有空再研究下。

若有錯漏，敬請指出 :-)

相關連接

Integration with Existing Apps facebook.github.io/react-nativ…