安装依赖
按照官方的说法，必须安装的依赖有Node、Watchman 和 React Native 命令行工具以及 Xcode。
Node, Watchman
官方推荐使用Homebrew来安装 Node 和 Watchman。
安装Homebrew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装 Node 和 Watchman：
brew install node
brew install watchman
如果你已经安装了 Node，检查node版本号（node -v ），但不是最新的版本，输入一些命令进行更新，或者直接去进行下载：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。
Yarn、React Native 的命令行工具（react-native-cli）
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。但是在这里，并没有去集成Yarn，依然使用的是npm工具。
npm install -g yarn react-native-cli
到这里为止React Native的依赖环境基本已经配置好了。
Xcode
Xcode的命令行工具
React Native 目前需要Xcode 9.4 或更高版本。启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。
React Native创建新项目
创建新项目
使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：
cd /Users/zq/Desktop/Test
react-native init AwesomeProject
编译并运行 React Native 应用
cd AwesomeProject
react-native run-ios
官方说很快就应该能看到 iOS 模拟器自动启动并运行你的项目，其实并不是这样的，第一次运行的时长长的让人崩溃，但是我们依然的坚持等待。
Xcode
Xcode的命令行工具
React Native 目前需要Xcode 9.4 或更高版本。启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。
React Native创建新项目
创建新项目
使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：
cd /Users/zq/Desktop/Test
react-native init AwesomeProject
编译并运行 React Native 应用
cd AwesomeProject
react-native run-ios
官方说很快就应该能看到 iOS 模拟器自动启动并运行你的项目，其实并不是这样的，第一次运行的时长长的让人崩溃，但是我们依然的坚持等待。
iOS的原生项目集成ReactNative
配置项目目录结构
在我们已经创建好的工程中，创建一个ReactNativeComponent的文件夹，进行备用.如图：
在ReactNativeComponent目录中创建package.json文件，并填入一下内容：
{
"name": "ReactNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
注意："name": "ReactNative" ，ReactNative是项目名，需要改成你自己的工程名
打开终端，然后cd ReactNativeComponent的目录路径，如下：
cd /Users/zq/Desktop/ReactNative/ReactNativeComponent
然后运行下列命令来安装：
npm add react-native
这样默认会安装最新版本的React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）：
警告“react-native@0.52.2”有未满足的同伴依赖“react@16.2.0”。
这是正常现象，意味着我们还需要安装指定版本的React(箭头指向的位置)：
npm add react@16.8.3
配置CocoaPods的依赖
在终端中cd 工程目录，然后输入pod init创建Podfile文件，然后在Podfile文件中输入需要集成的文件，如下：
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => './ReactNativeCompent/node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 调试功能需要此模块
'RCTAnimation', # FlatList和原生动画功能需要此模块
# 在这里继续添加你所需要的其他RN模块
]
# # 如果你的RN版本 >= 0.42.0，则加入下面这行
pod 'yoga', :path => './ReactNativeCompent/node_modules/react-native/ReactCommon/yoga'
#
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => './ReactNativeCompent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => './ReactNativeCompent/node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => './ReactNativeCompent/node_modules/react-native/third-party-podspecs/Folly.podspec'
⚠️路径一定不要写错，node_modules的路径要和自己项目的目录匹配（ReactNativeCompent要改为自己所创建的文件名）。
如果在你终端中输入pod install命令，爆出一下错误，恭喜你路径写错了，你需要再仔细检查一下你的文件路径了。
pod 集成这一部分比是较耗时的，但是一定要耐心等待，毕竟好事多磨。
代码集成
现在我们已经准备好了所有依赖，可以开始着手修改原生代码来把React Native真正集成到应用中了。
创建一个index.js文件
首先在ReactNativeCompent目录下创建一个空的index.js文件。
添加你自己的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('RNHighScores', () => RNHighScores);
3、JS调用
首先导入RCTRootView的头文件
#import <React/RCTRootView.h>
然后调用JS文件
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"RNHighScores"
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];
}
为了保证能正常连接本地启动的 rn 服务器,需要在 info.plist 文件中添加以下内容
运行
到这里并不是所有工作已经完成，可以放心运行项目了，我们还有最后的工作需要做。
运行之前我们还需要开启服务器，很简单，只需两步：
1、cd /Users/zq/Desktop/ReactNative/ReactNativeComponent
2、npm start
如果出现一下结果，就代表服务器已经成功打开了。
现在就可以放心的运行项目了。运行结果如下：
参考资料
React Native中文网：https://reactnative.cn/docs/integration-with-existing-apps/
