iOS项目集成react native就这几步

作者: hello老文 | 来源:发表于2017-03-04 20:02 被阅读3426次

没事写个记录, 也算是温故而知新吧. 如下效果:

react-native-cli和npm安装不在本文范围.以下react native简称RN.

现在RN也越来越方便了,集成进原生项目也非常简单.就这下面几个步骤.

我们有一个iOS原生项目叫 Helloworld, 是使用Cocoapods做包管理, RN也是Cocoapods接入. 目录结构如下:

[图片上传失败...(image-145ea0-1516158368187)]

1.创建RN

  1. 在项目目录下创建reactnative文件夹, 在这个文件夹里创建两个文件index.ios.jspackage.json;

  2. package.json添加以下内容

    {
        "name": "Helloworld",
        "version": "0.0.1",
        "private": true,
        "scripts": {
          "start": "node node_modules/react-native/local-cli/cli.js start"
        },
        "dependencies": {
            "react": "15.3.1",
            "react-native": "^0.33.0"
        },
        "devDependencies": {
          "babel-plugin-transform-decorators-legacy": "^1.3.4"
        }
    }
    
    
  3. index.ios.js添加以下内容

    import React, { Component } from 'react';
    
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
    } from 'react-native';
    
    class Main extends Component {
      render() {
        return (
          <View style={{backgroundColor:'yellow', flex:1, alignItems:'center', justifyContent:'center'}}>
            <Text>Hello World</Text>
          </View>
        );
      }
    }
    
    AppRegistry.registerComponent('Helloworld', () => Main);
    
  4. reactnative文件夹下用终端命令: npm install

2.接RN入项目

  1. 打开项目中的Podfile文件, 添加以下内容:

    pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
            'Core',
             'ART',
             'RCTActionSheet',
             'RCTAdSupport',
             'RCTGeolocation',
             'RCTImage',
             'RCTNetwork',
             'RCTPushNotification',
             'RCTSettings',
             'RCTText',
             'RCTVibration',
             'RCTWebSocket',
             'RCTLinkingIOS',
             # Add any other subspecs you want to use in your project
           ]
    

    注意 path =>后面的路径是否正确.

  2. 在项目下执行命令: pod install

  3. RN是以view的形式在项目中使用的, 所以再项目中新建一个控制器RNMainViewControllerRNView

    RNMainViewController.m

    #import "RNMainViewController.h"
    #import "ViewController.h"
    #import "RNView.h"
    
    @interface RNMainViewController ()
    
    @end
    
    @implementation RNMainViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        self.title = @"RN模块首页";
        
        RNView * rnView = [[RNView alloc] initWithFrame:self.view.bounds];
        self.view = rnView;
    }
    
    @end
    

    RNView.m

    #import "RNView.h"
    #import "RCTBundleURLProvider.h"
    #import "RCTRootView.h"
    
    @implementation RNView
    
    - (instancetype)initWithFrame:(CGRect)frame {
        
        if (self = [super initWithFrame:frame]) {
    #if TARGET_IPHONE_SIMULATOR
            [[RCTBundleURLProvider sharedSettings] setJsLocation:@"localhost"];
    #else
            [[RCTBundleURLProvider sharedSettings] setDefaults];
    #endif
            NSURL *jsCodeLocation;
            jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
            
            RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                                moduleName:@"Helloworld"
                                                         initialProperties:nil
                                                             launchOptions:nil];
            
            [self addSubview:rootView];
            rootView.frame = self.bounds;
        }
        return self;
    }
    
    @end
    
  4. 在项目info.plist加上 App Transport Security Settings:

  5. Build Phases中添加一个Run Script, 注意其中的路径正确:

    [图片上传失败...(image-755f88-1516158368187)]

  6. reactnative文件夹下用终端命令: npm start

  7. 运行项目,不出意外就大功告成了.

项目代码 github

相关文章

网友评论

  • 26b0e5262789:这样在原生VC和载有RN视图的两个VC之间 push 和pop时,内存会一直增加,怎么回事?
    26b0e5262789:@hello老文 RN0.5x的版本确实存在这个问题,0.48的版本没这个问题
    hello老文:应该不会吧, VC销毁了, 放在VC上的rn那个view也同会销毁了啊
  • 蚂蚁977:找不到RCTBundleURLProvider啊
    聆默无语:@蚂蚁977 怎么解决的?我也遇到这个问题了
    蚂蚁977:找到了想,谢了
  • c8d8494206fd:App Transport Security Settings: 第四步 最后一个值看不全
  • 疯狂的小托马斯:你好 为什么我cocoapod集成后 出现 'jschelpers/JavaScriptCore.h' file not found 的错误啊

本文标题:iOS项目集成react native就这几步

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