1.在现有ios项目中.新建一个文件夹.ReactNative
2.在文件夹中添加一个新建文件.package.json(最好自己创建一个新的RN项目.然后把该项目中的package.json文件复制过来,然后更改版本以及name)
Pasted Graphic.png3.在终端执行安装, $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:出现如下就是路径错误
6.2问题2:这是因为在指定的路径没有寻找到相应的组件。此时就需要修改podfile文件中的路径,由于上方提示没有 Yoga ,那我们就指定Yoga的路径。如图:
Pasted Graphic 2.png7.此时,RN就已经集成到项目中.
Pasted Graphic 4.png8.0.原生跳转到RN页面.
-(void)touchesBegan:(NSSet<UITouch *> *)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来启动服务。
参考:http://www.jianshu.com/p/d7df667b32de
http://blog.csdn.net/nethanhan/article/details/72840821
网友评论