环境配置

搭建ReactNative开发环境

创建依赖包文件（package.json）

React Native的植入过程同时需要React和React Native两个node依赖包。我们把具体的依赖包记录在package.json文件中。

创建package.json

$ cd 需要放置的目录下（项目的根目录/项目中自己创建的文件夹）
$ touch package.json

文件内容如下

记得删除里面的文字注释，包括双斜杠，否则报错，这里只是为了说明。 { "name": "NumberTileGame",//此处替换你的项目名称 "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "15.4.1",// react版本，可以替换成最新的。 "react-native": "0.42.0"// 同上，目前最新0.42.0 } }

安装依赖包（node_modules）

使用npm（即node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。

终端进入包含有package.json文件的目录下，运行下列的命令安装：

$ cd 项目的根目录/项目中自己创建的文件夹
$ nam install

添加React Native框架（Podfile）

在Pod file的文件中添加以下内容：

最低适配的版本

platform :ios, "9.0"
use_frameworks!

target的名字一般与你的项目名字相同

target 'TestReactNative' do

'node_modules'目录一般位于根目录中

但是如果你的结构不同，那你就要根据实际路径修改下面的:path

记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：'../RNComponent/node_modules/react-native'，如果没有，直接如下创建即可。

pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
]

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

该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容

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

然后执行以下命令

$ cd 项目的根目录
$ pod install

代码集成（index.ios.js文件的创建）

首先创建一个空的index.ios.js文件。一般来说我们把它放置在同上面的package.json的同级目录下。

$ cd 项目的根目录/项目中自己创建的文件夹
$ touch index.ios.js

添加对应的代码以及对应在项目中添加原生的代码

启动开发服务器，运行Package

进入到node_modules文件夹所在的路径

$ cd 项目的根目录/项目中自己创建的文件夹
$ nam start

相关集成问题

直接运行项目会报Could not connect to development server错误，需要在项目中配置App Transport Security。
在info.plist中添加

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

Simulator Screen Shot 2017年8月22日 下午7.37.27.png

将域名修改为IP地址：localhost -> 127.0.0.1

参考文章：
这是个美女妹子
iOS开发---混编之原生代码中嵌入ReactNative

xcode工程集成 React-native步骤