rn源码ios_ios现有项目集成RN

1.在现有ios项目中.新建一个文件夹.ReactNative

2.在文件夹中添加一个新建文件.package.json(最好自己创建一个新的RN项目.然后把该项目中的package.json文件复制过来,然后更改版本以及name)

Pasted Graphic.png

3.在终端执行安装, $cd reactnative $npm install

安装成功后，reactnative目录会产生一个node_modules，里面就是react-native依赖的所有项目包。

4.在Podfile里面添加这串

pod ‘Yoga’, :path => ‘./ReactNative/node_modules/react-native/ReactCommon/yoga’

pod 'React', :path => ‘./ReactNative/node_modules/react-native', :subspecs => [

'Core',

‘ART’,

‘RCTAdSupport’,

‘DevSupport’,

'RCTNetwork',

'RCTPushNotification’,

'RCTText',

'RCTWebSocket',

‘RCTActionSheet’,

'RCTGeolocation',

'RCTImage',

'RCTSettings',

'RCTVibration',

'RCTLinkingIOS’,

‘BatchedBridge’,

]

5.项目根目录执行:pod install

6.可能出现的问题.

6.1 问题1:出现如下就是路径错误

Pasted Graphic 1.png

6.2问题2:这是因为在指定的路径没有寻找到相应的组件。此时就需要修改podfile文件中的路径，由于上方提示没有 Yoga ，那我们就指定Yoga的路径。如图：

Pasted Graphic 2.png

7.此时,RN就已经集成到项目中.

Pasted Graphic 4.png

8.0.原生跳转到RN页面.

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

NSURL * jsonCodeUrl = [NSURL URLWithString:@"http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true"];

RCTRootView * rootView = [[RCTRootView alloc]initWithBundleURL:jsonCodeUrl moduleName:@"AwesomeProject" initialProperties:nil launchOptions:nil];

ReactNativeVC *rnVc = [[ReactNativeVC alloc]init];

rnVc.view = rootView;

[self.navigationController pushViewController:rnVc animated:YES];

}

9.0 开启服务:根目录执行react-native start来启动服务。