iOS项目集成react native就这几步

七牛的图片在这里居然显示不了... 可以到简书上看图

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

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

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

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

1.创建RN

1. 在项目目录下创建reactnative文件夹, 在这个文件夹里创建两个文件index.ios.js和package.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的形式在项目中使用的, 所以再项目中新建一个控制器RNMainViewController和RNView

   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, 注意其中的路径正确:

   

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

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

最后项目目录结构:

项目代码 github