ios现有项目集成RN

作者: 侭情显現 | 来源:发表于2017-09-27 18:23 被阅读105次

    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<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

    相关文章

      网友评论

        本文标题:ios现有项目集成RN

        本文链接:https://www.haomeiwen.com/subject/zwauextx.html