iOS原生項目嵌套React代碼

1. 新建一個項目

用Xcode新建一個項目，名字任意，我的叫RNwithnative
在info.plist裏面加上如下代碼，確保可以走通http的網址

 <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

2.給這個項目加上pod

podFile裏的內容是

platform :ios, ‘7.0’
use_frameworks!
target :RNwithnative do
pod ‘React’, :path => ‘./node_modules/react-native’, :subspecs => [
‘Core’,
‘RCTImage’,
‘RCTNetwork’,
‘RCTText’,
‘RCTWebSocket’,
]
end

這樣就用cocoa pod安裝好了ReactNative庫

3.打開命令行窗口

1.切換到項目根目錄
2.運行npm install react-native
3.會生成一個文件node_modules，和.xcodeproj文件平級。
4.注：這個node_modules文件裏缺少一個react文件，所以你要去init的RN項目裏去copy一份放進去才行，比如你之前新建過一個RN項目，那樣建出來的就是完善的

4.建RN應用

1.在根目錄裏面新建文件夾ReactComponent
2.在這個文件夾裏面添加文件index.ios.js文件
3.那個index.ios.js文件也可以從之前建的RN項目裏copy

 >/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class cainiao5 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('cainiao5', () => cainiao5);

上面的就是我index.ios.js裏的內容

5.原生代碼裏面的新建一個放RN頁面的容器

1.新建一個ReactView繼承UIView
2.ReactView裏面添加RN的view
ReactView.h裏的代碼如下

#import "ReactView.h"
#import <RCTRootView.h>

@implementation ReactView

-(instancetype)init{

    self=[super init];
    self.backgroundColor=[UIColor redColor];
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];

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

    [self addSubview:rootView];
    rootView.frame = self.bounds;

    return self;
}

@end

6.在ViewController裏面把ReactView加進去

ViewController.m裏的代碼如下

#import "ViewController.h"
#import "ReactView.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet ReactView *reactView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _reactView=[[ReactView alloc] init];
    [self.view addSubview:_reactView];
    _reactView.frame=CGRectMake(50, 50, 200, 100);
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

7.想要運行要先啓動開發服務器

1.打開命令窗口
2.切換到項目根目錄
3.運行 (JS_DIR=pwd/ReactComponent;cd node_modules/react-native; npm run start – –root $JS_DIR)

4.注如果遇到問題，比如8081的端口已經被佔用了，那把你打開的其他RN項目停止運行就好了，它會有提示，教你怎麼弄， 一定要仔細看

8.運行項目

運行結果如圖所示