React Native - iOS 原生项目集成 React Native

这里只是纯粹的iOS 原生项目集成 React Native, 集成前的准备工作这里不多说了,React Native 开发基础环境和CocoaPods都需要提前都安装好。(适用于 React Native 0.44.3以下版本)

一、集成React Native

1.设置项目目录结构

现在有一个 RNIntegration项目,目录下创建个 ios 文件夹,然后将根目录(根目录指的是RNIntegration目录下,以此类推)下的其他东西都移到 ios 文件夹中(也可以不创建这文件或者起个其他的名字,这个看个人喜好了),如下图:

新建 ios 文件夹.png

2.创建配置文件

在根目录下创建package.json文件,文件内容如下:

{
  "name": "RNIntegration",
  "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"
  }
}

示例中的version字段没有太大意义（除非你要把你的项目发布到npm仓库）。scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。

3.安装React Native依赖包

接下来我们使用npm（node包管理器，Node package manager）来安装React和React Native模块。在Terminal(终端)中进入到根目录(即包含有package.json文件的目录)执行npm install命令,运行结果如下：

npm install.png

这些模块会被安装到项目根目录下的node_modules/目录中（所有通过npm install命令安装的模块都会放在这个目录中。这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。

4.创建 index.ios.js（js文件入口）

在根目录文件夹里创建index.ios.js文件，作为js文件入口。
index.ios.js文件内容如下：

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

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

//这里的类名要改成你自己项目的类名
class RNIntegration 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('RNIntegration', () => RNIntegration);

5. Cocoapods集成React Native

若原项目无使用Cocoapods，则在根目录下创建Podfile。（有则直接添加pod相关代码）
Podfile文件内容为（需确保路径对）：

platform :ios, "8.0"
# target的名字一般与你的项目名字相同
target 'RNIntegration' do 
 # 如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'DevSupport', 
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', 
    'RCTImage',
    ......  #这里可以添加你需要的框架
    ]
    # 如果你的RN版本 >= 0.42.0，则加入下面这行
    pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

end

在你开始把React Native集成到你的应用中之前，首先要决定具体整合的是React Native框架中的哪些部分。而这就是subspec要做的工作。在创建Podfile文件的时候，需要指定具体安装哪些React Native的依赖库。所指定的每一个库就称为一个subspec。
可用的subspec都列在node_modules/react-native/React.podspec
中，基本都是按其功能命名的。一般来说你首先需要添加Core，这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库（即<Text>组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。

在Terminal(终端)中进入RNIntegration.xcodeproj的同级目录,执行pod更新命令

pod install

运行效果如下:

运行效果.png

二、原生项目处理

1. 向对应ViewController 添加RCTRootView

在AppDelegate.m文件中导入以下 .h 文件:

#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

在- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions中添加以下代码:

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];

    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"RNIntegration"//要改成当前项目的名字
                         initialProperties : nil
                          launchOptions    : nil];
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    UIViewController *rootViewController = [UIViewController new];
    rootViewController.view = rootView;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];

2. iOS项目更新App Transport Security

在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机。我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。如果不这样做，在尝试通过http连接到服务器时，会遭遇这个错误 - Could not connect to development server.
原因是ATS限制使用HTTP, 数据请求尽量通过HTTPS加密传输,

方法一:(只允许 localhost 请求)

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

方法一.png

方法二:(允许所有的 http 请求)

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

方法二.png

三、运行项目

1. 启动开发服务器

在运行我们的项目之前，我们需要先启动我们的开发服务器(即Packager，它负责实时监测js文件的变动并实时打包，输出给客户端运行)。进入packager的同级目录下 ,然后命令行启动服务：

react-native start

或者

npm start

启动服务后,在 xcode 中 run 该项目。
这两个命令都可以启动开发服务器，亲测，但不知道有什么区别。

2. 运行iOS项目

运行成功效果如下：