iOS开发嵌套ReactNative页面

cd 需要放置的目录下（项目的根目录/项目中自己创建的文件夹）
touch package.json

{
  "name": "iOSNestReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0"
  }
}

cd 项目的根目录/项目中自己创建的文件夹
npm install

## 在iOS原生代码所在的目录中（也就是`.xcodeproj`文件所在的目录）执行：
$ cd 项目的根目录
$ pod init

# 最低适配的版本
platform :ios, "9.0"
use_frameworks!
# target的名字一般与你的项目名字相同
target ‘iOSNestReactNative‘ do

  # ‘node_modules‘目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
#记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：‘../RNComponent/node_modules/react-native‘，如果没有，直接如下创建即可。
  pod ‘React‘, :path => ‘./node_modules/react-native‘, :subspecs => [
    ‘Core‘,
    ‘RCTText‘,
    ‘RCTNetwork‘,
    ‘RCTWebSocket‘, # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
  ]
 # 如果你的RN版本 >= 0.42.0，请加入下面这行
# 该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容
  pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
end

$ cd 项目的根目录/项目中自己创建的文件夹
$ touch index.ios.js

‘use strict‘;

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

class RNHighScores extends React.Component {

  render() {
    // 这里是使用Xcode那边传过来的数据进行构建组件
     var content = this.props[‘NameDict‘].map(
       name=><Text key = {name.name}>{name.name}:{name.value}{‘\n‘}</Text>
     );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          跳转过来啦...嘻嘻!
        </Text>
        <Text style={styles.scores}>    
          iOS嵌套ReactNative是不是成功了呢??
        </Text>
        <Text style={styles.scores}>    
          {content}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#FFFFFF‘,
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  scores: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
});

// 整体js模块的名称
AppRegistry.registerComponent(‘RNHighScores‘, () => RNHighScores);

// #import "RCTRootView.h"，更新之后，需要导入下面的头文件。
// 官网的评论下方也有说明，否则会提示RCTRootView.h文件不存在。
#import <React/RCTRootView.h>

//
//  NextViewController.m
//  iOSNestReactNative
//
//  Created by 思 彭 on 2017/6/16.
//  Copyright ? 2017年 思 彭. All rights reserved.
//

#import "NextViewController.h"
// #import "RCTRootView.h"，更新之后，需要导入下面的头文件。
// 官网的评论下方也有说明，否则会提示RCTRootView.h文件不存在。
#import <React/RCTRootView.h>

@interface NextViewController ()

@end

@implementation NextViewController

- (void)viewDidLoad {
    [super viewDidLoad];
//    self.view.backgroundColor = [UIColor grayColor];
//    UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
//    view1.backgroundColor = [UIColor redColor];
//    [self.view addSubview:view1];
    
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"RNHighScores"
                         initialProperties :
     @{
       @"NameDict" : @[
               @{
                   @"name" : @"思思",
                   @"value": @"棒棒哒"
                   },
               @{
                   @"name" : @"思思sisi",
                   @"value": @"嘻嘻"
                   }
               ]
       }
                          launchOptions    : nil];
    self.view = rootView;
}

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

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

# 进入到node_modules文件夹所在的路径
$ cd 项目的根目录/项目中自己创建的文件夹
$ npm start

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>