一.准备工作

1.安装Node.js

先安装Homebrew，再利用Homebrew安装Node.js，运行命令行如下：

//安装Home-brew

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

//安装Node.js

brew install node

2.安装React Native的命令行工具（react-native-cli）

npm install -g react-native-cli

3. 安装CocoaPods

网上很多资源，这里不做过多说明。

二.集成React Native

1.安装React Native

1）创建ReactComponent文件夹和配置文件

       在项目中建一个名为ReactComponent的文件夹, 用于存放我们react-native的相关文件, 再创建一个package.json文件, 用于初始化react-native.（文件夹名字自定义）

       文件目录结构如下：

文件目录结构

      创建package.json文件，文件内容如下：

package.json文件内容

       其中，name为项目名称。dependencies里为react和react-native的版本信息。

       建议利用react-native init Helloworld新建新项目时会自动创建package.json，直接把文件复制过来，更改name为自己的原生项目名，以确保react、和react-native的版本是最新的。

2）安装React Native依赖包

在ReactComponent目录下运行命令行：

npm install

这里有可能有错误。根据提示的错误进行操作。

实在install不回来的话，如果之前有创建过React Native项目，把里面的node_modules直接拷贝过来，也是没有问题（个人尝试过）。

2. 创建 index.ios.js（js文件入口）

在ReactComponent文件夹里创建index.ios.js文件，作为js文件入口。如图一

index.ios.js文件内容如下：

3. Cocoapods集成React Native

若原项目无使用Cocoapods，则在根目录下创建Podfile。（有则直接添加pod相关代码）

目录结构如下：

# 如果你的RN版本 >= 0.42.0，请加入下面这行

pod"Yoga",:path=>"../node_modules/react-native/ReactCommon/yoga"

3. 启动开发服务器

在运行我们的项目之前，我们需要先启动我们的开发服务器。进入 reactnative目录(# From the root of your project, where the `node_modules` directory is located. 也就是node_modules文件夹所在的目录) ,然后命令行运行：

react-native start 或者 npm start

4.运行项目