現有iOS工程集成React Native

現有的iOS項目裏集成RN的支持的大致框架, iOS應用集成RN的SDK，運行時加載預先打包好的jsBundle。

主要內容

在現有iOS工程集成React Native組件的主要內容有：

1. 設置React Native的依賴庫和目錄結構。
2. 瞭解項目所須要的React Native組件。
3. 使用CocoaPods 添加和管理這些組件。
4. 使用JavaScript開發所須要的React Native組件。
5. 添加React Native 組件的容器View - RCRootView
6. 開啓React Native服務器並運行本地工程。
7. 驗證React Native是否按預期工做。

前期準備

1. 設置目錄結構

• 建立React Native 工程的文件夾, 如： RNProject。
• 在React Native 工程文件夾RNProject中建立/ios文件夾。並將現有工程拷貝到/ios文件夾下。

2. 安裝JavaScript依賴

在React Native 工程文件夾RNProject根目錄建立package.json文件，文件的內容以下：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}
複製代碼

打開終端，進入對應React Native工程目錄, 安裝下react 和 react-native核心依賴

npm install react react-native
複製代碼

安裝完成後，會在當前工程目錄建立一個新的/node_modules文件夾, 這個文件裏存儲着當前工程所需的全部JavaScript依賴庫。

最後，將node_modules/添加到iOS 工程的.gitignore文件中。

這階段目錄結構以下：

3. Install CocoaPods

CocoaPods 是iOS開發的一個包管理工具. 請自行安裝~。

添加React Native到App

1. 配置Cocoa Pods 依賴

進入React Native工程的ios目錄，編輯Podfile文件（按照官網步驟可能會報錯，由於react的版本不一樣，配置不一樣），內容以下👇🏻 參考連接

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'

target 'RnDiffApp' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'RnDiffAppTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end
複製代碼

編輯完成後，執行pod install命令。

2. 代碼集成

1. 建立index.js文件

首先在React Native工程的根目錄建立index.js文件，index.js是React Native應用程序的起點，通常來講是必須的。

2. 添加React Native代碼到index.js中

打開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: 'http:\/\/patpatwebstatic.s3.us-west-2.amazonaws.com\/origin\/other\/cms\/position\/60ab65d1b20a2.jpg'}} /> </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);
複製代碼

3. 使用RCTRootView加載顯示index.js的內容

首先，在iOS文件中引入RCTRootView頭文件

#import <React/RCTRootView.h>
複製代碼

建立一個點擊事件，執行testRNButtonAction方法。

- (void)testRNButtonAction
{
        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];
 }
複製代碼

測試集成是否OK

1.添加應用程序運輸安全異常

Apple已阻止隱式明碼通信 HTTP資源加載。 所以，須要在iOS工程的info.plist文件中作一下配置。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>
複製代碼

2.運行包

要運行app工程，首先要啓動React Native的開發服務器。 在React Native工程的根目錄運行：

npm start
複製代碼

啓動成功以下：

若是報找不到yarn命令的錯誤，則須要安裝一下yarn, 在終端輸入命令：

npm install --global yarn
複製代碼

react native服務啓動後，直接在Xcode中運行你的iOS工程，點擊對應的按鈕執行testRNButtonAction方法，成功加載React Native的界面。

另外，你還能夠經過命令行的方式運行你的工程：

npx react-native run-ios
複製代碼

配置過程遇到的問題

1. 找不到對應React Native依賴庫問題： 如：No podspec found for FBReactNativeSpec in ../node_modules/react-native/Libraries/FBReactNativeSpec

2. node 相關問題解決： blog.csdn.net/xinghuowuzh…

參考連接：

1. Integration with Existing Apps