在IOS环境下集成ReactNative页面

1. RN的环境集成还是得看RN官网，步骤写得非常详细。ReactNative中文网

2.在这里还是重复一遍步骤，加深一下印象：

开发环境准备

首先按照环境搭建教程来安装React Native在iOS平台上所需的一切依赖软件（比如npm）。

1.设置项目目录结构

首先创建一个空文件夹(暂时叫“RN_Test”)用于存放RN项目，然后在里面创建一个ios文件夹来存放原生工程。

2.安装JavaScript依赖包

在RN_Test根目录下创建一个叫package.json的文件，然后补充内容：

 

{
  "name": "MyReactNativeApp",
  "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.3"
  }
}

这里的react-native和版本号对react是有依赖的，所以不能随便乱写。这里无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。

name 表示 RN项目的名称，和原生项目名称不一样没关系。

version 表示项目版本号，版本迭代时用。

3.node模块安装

在终端中打开项目进入根目录(进入RN_Test文件夹下)，运行下面的命令来安装node_modules。

npm install

4.安装CocoaPods管理工具

CocoaPods是针对iOS和Mac开发的包管理工具。我们用它来把React Native框架的代码下载下来并添加到你当前的项目中。我们建议使用Homebrew来安装CocoaPods。

如果已经安装过可以跳过此步骤。

5.创建Podfile文件，添加native module依赖

1.进入ios文件夹下面，输入命令pod init。

2.编写podfile文件，按照如下实例，这里介绍和官网差不多，修改官网一点错误的是，在导入Yogo这个库时，官网是小写，这里应该大写“Yoga”。（这里后面有修改，小写就行）

# target的名字一般与你的项目名字相同 
target 'NumberTileGame' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的RN模块,下面这些有可能会用到，按需添加
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTSettings',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTVibration',
 ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

   # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

创建好了Podfile后，就可以开始安装React Native的pod包了。

pod install

代码集成

1.首先在项目根目录RN_Test下创建一个index.js文件。可使用命令 touch index.js

2.添加自己的RN代码

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

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>    
          {contents}
        </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('MyReactNativeApp', () => RNHighScores);

这里的'MyReactNativeApp'表示RN项目的入口，和后面原生入口要一致。

3.创建原生ViewController,下ViewDidLoad或者loadView方法里面调用下面方法。

在vc中导入头文件import "RCTRootView.h"时，可能会报错找不到头文件。解决办法是修改Targets -> Build Setting -> User Header Search Path ，新增 $(PODS_ROOT)。

- (void)loadRNView
{
    //有两种加载方式
    //加载单个RCTRootView 
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNApp" initialProperties:@{@"arg":@"这是第一个RN页面",@"navigator":@""} launchOptions:nil];
    self.view = rootView;
    
    
    /*
    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil]; 
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"RNApp" initialProperties:@{@"arg":@"这是第一个RN页面"}];
    self.view = rootView;
     */
}

4.测试时候需要添加网络请求权限，因为IOS原生app对非https请求有一个屏蔽，所以需要配置info.plist文件，添加http访问权限。

5.启动node服务。

npm start 或者 react-native start

6.运行应用。可以指定具体模拟器

react-native run-ios --simulator "iPhone 7"

7.项目打包

详情请参照RN打包步骤