在原iOS项目植入React Native进行混合开发

一、环境集成：

导入依赖的包资源

• 创建一个iOS项目，切换到项目的根目录；
• 得到package.json文件（直接react-native init ~ 产生一个新的工程，拷贝package.json文件即可）；
• 修改package.json文件里面的工程名字为此项目的工程名字；

• 用命令行cd到项目的根目录；执行命令：npm install；

  
  
  

• 完成之后在项目目录中会出现node_modules文件夹，里面就是react-native依赖的所有项目包。

  
  
  

集成CocoaPod，并配置编译环境

• 1.1、切换到项目根目录，往Podfile中增加以下的内容。如果你还没有这个文件，在你工程的根目录下创建一个。

• Podfile里面的执行代码：

target 'RNTest02’ do
pod 'React', :path => './node_modules/react-native', :subspecs => [  'Core',  
 'RCTImage',  
 'RCTNetwork',  
 'RCTText',  
 'RCTWebSocket',  
 // 添加其他你想在工程中使用的依赖。
]
end

• 1.2、接着，终端切换到项目的根目录，命令行执行：

$ pod install

• 1.3、 创建一个文件夹来保存你的React代码，然后创建一个index.ios.js文件: 运行命令

$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
$ touch ReactComponent/其他要的js文件，比如主页等等

• 1.4、添加一个容器视图来容纳RN组件，它可以是你应用里任何的UIView:（加载这个页面时启动RN服务器）
  进到iOS项目工程中，创建一个继承自UIView的类，比如：RNLoadView（可以任意命名！）,并进行RN初始化配置：

  
  
  

• 4）在index.ios.js中实现跨平台代码：

  
  
  

二、启动开发服务器

   在运行我们的项目之前，我们需要先启动我们的开发服务器。命令行进入进入项目根目录，执行  $ react-native start

注意：直接运行项目会报Could not connect to development server错误，需要在项目中做如下配置：