使用CocoaPods在现有项目集成React-Native

1. 使用命令 react-native init newProject 新创建一个react Native项目。
2. 将新创建的react native项目中的index.ios.js文件和node_modules,package.json放在一个文件夹中，如下图所示。
3. 在已有的iOS工程里集成CocoaPods(集成步骤见上一篇博文)，在podfile文件中写下如下代码：
   path根据自己的工程目录修改

platform :ios, ‘7.0’ target “RN-React-Native” do pod ‘React’, :path => ‘./react-native/node_modules/react-native’, :subspecs => [
‘RCTText’,
‘RCTImage’,
‘RCTWebSocket’,
‘RCTPushNotification’,
‘RCTActionSheet’,
‘ART’,
‘RCTCameraRoll’ ] end

4.podfile文件修改完之后，cd到iOS项目工程的根目录里执行命令 pod install ,安装RN所需库文件。

5.使用生成好的.ccworkspace打开项目，在原有iOS工程里新建一个派生类ReactView,为更好的理解RN+iOS混合开发,然后在init …frame方法里写入以下代码

导入头文件:#import “RCTRootView.h”

-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
NSURL *jsLocation = [NSURL URLWithString:@”http://localhost:8081/index.ios.bundle“];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsLocation moduleName:@”iostaoge03”
initialProperties:nil launchOptions:nil];
self.rootView = rootView;
[self addSubview:rootView];
}
return self;

}

6 . ViewController.m的viewDidLoad里添加视图，

• (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view, typically from a nib.
  ReactView *rootView = [[ReactView alloc]initWithFrame:CGRectMake(110, 110, 220, 220)];

  [self.view addSubview:rootView]; }

7.启动RN服务 npm 终端命令:cd 到下图标注的目录执行命令

npm start