把React Native组件集成到iOS集成应用中有如下几个主要步骤：

1.要了解你要集成的React Native组件。
2.创建一个Podfile，在其中以subspec的形式填写所有你要集成的React Native的组件。
3.创建js文件，编写React Native组件的js代码。
4.添加一个事件处理函数，用于创建一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的，而且它必须对应你在index.js中使用AppRegistry注册的模块名字。
5.启动React Native的Packager服务，运行应用。
6.根据需要添加更多React Native的组件。

1.设置项目目录结构

首先创建一个空目录用于存放React Native项目，然后在其中创建一个/ios子目录，把你现有的iOS项目拷贝到/ios子目录中。

这是我已经建好的完整工程

2.在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

{
  "name": "NBReactNativeTest",
  "version": "1.0.0",
  "description": "iReading App Write In React-Native",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "git@github.com:attentiveness/reading.git"
  },
  "engines": {
    "node": ">=4"
  },
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "lint": "eslint app --fix",
    "format": "find app -name '*.js' | xargs prettier --write --single-quote"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.3",
    "react-navigation": "^1.5.11",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

我也懒得去一个一个理解里面每个参数的意思，大体上是要导入React Native 的一些库。
接下来我们使用npm（node包管理器，Node package manager）来安装React和React Native模块。 请打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装：

$ npm install

这些模块会被安装到项目根目录下的node_modules/目录中（所有通过npm install命令安装的模块都会放在这个目录中。这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。

安装CocoaPods

这里就不用详细说咋安装CocoaPods了吧，真不知道的童鞋，还是多去看看官方文档，对你没坏处。下面我不会再有废话了，跟不上的直接照着做就完了。

把React Native添加到你的应用中

在/ios子目录中使用CocoaPods的init命令：

$ pod init

Podfile会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的Podfile的内容看起来类似下面这样：

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

target 'NBReactNativeTest' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

    pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'CxxBridge', # 如果RN版本 >= 0.45则加入此行
        'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket', # 这个模块是用于调试功能的
        # 在这里继续添加你所需要的RN模块
    ]
    # 如果你的RN版本 >= 0.42.0，则加入下面这行
    pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

    # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
    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

创建好了Podfile后，就可以开始安装React Native的pod包了。

$ pod install
$ pod update

React Native组件

1. 创建一个index.js文件

首先在项目根目录下创建一个空的index.js文件

# 在项目根目录执行以下命令创建文件：
$ touch index.js

2. 添加你自己的React Native代码

在index.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件，然后用一个带有样式的<View>组件把它包起来。

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

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>    
          {contents}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// 整体js模块的名称
AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);

3.导入RCTRootView的头文件

#import <React/RCTRootView.h>

4.button的点击事件中加载RCTRootView

- (IBAction)highScoreButtonPressed:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                           moduleName        : @"MyReactNativeApp"
                           initialProperties :
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                           launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

5.添加App Transport Security例外

Apple现在默认会阻止读取不安全的HTTP链接。所以我们需要把本地运行的Packager服务添加到Info.plist的例外中，以便能正常访问Packager服务：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

6.运行Packager

要运行应用，首先需要启动开发服务器（即Packager，它负责实时监测js文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行：

$ npm start

7. 运行应用

如果你使用的是Xcode，那么照常编译和运行应用即可。如果你没有使用Xcode，则可以在命令行中使用以下命令来运行应用：

# 在项目的根目录中执行：
$ react-native run-ios

结束！！！参考：https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content