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.运行项目

运行结果如图所示