React Native集成到IOS原生项目

这里默认电脑上已经安装了cocoapods和React-Native，如果没有RN开发环境，可以点击这里按照步骤配置。

0、新建项目

首先，先使用xcode新建一个项目，然后在项目的根目录下新建一个文件夹，用于存放RN的组件库还有其他一些文件。这里假设新建一个名为 RNComponent 的文件夹。目录结构为：

1、新建RN配置文件

准备妥当以后，我们在 RNComponent 这个文件夹里就可以放置所有RN相关的文件。新建一个用户初始化RN的配置文件，是Json文件。命名为 package.json 。

{
  "name": "RNApp","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","react-native-deprecated-custom-components": "^0.1.0","react-native-tab-navigator": "^0.3.3" } }

上述代码里的配置信息已经足够现在集成项目使用，如果需要了解其它配置信息的话，可以参考下方：

name 是指RN项目的名字，这个和原生项目的名字保持一致即可
version 是指项目版本号
description 项目的描述
author 开发者个人信息
private 当设置为true时，npm不会发布这个package
dependencies 指需要哪些依赖组件，并且指明版本号，这样用户安装时，会自动安装这些依赖组件
devDependencies 是指开发或测试的依赖组件，正式打包的时候不会打包到最终的生产包中
scripts 定义npm脚本命令，key值表示命令名，value值表示命令对应的脚本或者脚本路径
main 工程生成的package主入口点，当在 node 中调用 require(‘{module name}’) 时会 require 到这个文件
repostitory 如果我们这个工程是开源的，这个字段用来指明工程的仓库 URL 地址以及版本控制系统的类型，这可以方便其他开发者贡献代码
bugs 使用者可以提交bugs的 URL 或者邮件地址

文章结尾放了一些 package.json 的扩展内容，感兴趣的可以看看。

2、安装RN

编辑好 package.json 以后，我们来安装RN。这里需要确定当前目录是否为刚才新建的目录，并且确定 package.json 存在，然后，输入安装RN，在终端输入命令 npm install

当出现下图，就说明安装成功，并且目录里多了一个 node_modules 文件夹。如图：

3、设置podfile文件

安装完毕以后，我们切换到xcode项目根目录中，然后再终端输入 pod init 命令，来生成podfile文件。如图：

4、使用pod管理依赖组件

生成 podfile 文件以后，直接编辑，编辑信息如下：

pod 'Yoga',:path => './RNComponent/node_modules/react-native/ReactCommon/yoga'
  pod 'React',:path => ‘./RNComponent/node_modules/react-native/',:subspecs => [
 'Core','ART','RCTActionSheet','RCTAdSupport','RCTGeolocation','RCTImage','RCTNetwork','RCTPushNotification','RCTSettings','RCTText','RCTVibration','RCTWebSocket','RCTLinkingIOS']

这里把所有组件全部做了依赖管理，所以在开发中，就需要根据实际需求来做对应的依赖。如果路径没有指定正确，就会报错，具体点击这里参考。

编辑好以后，直接在终端输入 pod install 命令，安装依赖。出现下图时，就说明安装成功：

此时目录结构为：

5、新建RN项目js文件入口

接下来需要在 RNComponent 文件夹中新建RN的js入口文件 index.ios.js,这里直接复制RN初始化时的文件，内容如下：

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

import React,{ Component } from 'react';
import {
  AppRegistry,//注册
  StyleSheet,//样式
  Text,//文本组件
  View,//视图组件
  Image
} from 'react-native';

export default class RNApp extends Component {
    render() {
        return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                nethanhan
              </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('RNApp',() => RNApp);

6、集成测试

完成所有工作以后，我们打开xcode项目，然后创建一个按钮，用于跳转到另外一个控制器，然后这个控制器直接把RN界面当成自己的view来展示。如图：

RN模块的类是 RCTRootView ，实例化时需要传入相应的参数：

然后在项目的plist文件中添加允许http连接声明，代码如下：

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

接下来在终端中切换到刚才的 RNCompoent 目录下，运行 react-native start 命令，如图：

最后运行xcode项目，点击按钮，会跳转到RN界面的控制器里，就会出现RN的界面（第一次运行会慢一些），如图：

OK！至此，我们已经成功的把RN集成到IOS原生项目中。如果有什么疑问，随时欢迎评论！

7、package.json扩展

我们在上方 package.json 中只配置了一些常用的信息，还有一些其它的说明，可以点击这里查阅。因为是属于npm的知识点，所以在这里放上一个真实项目的 package.json 的内容：

{
  "name": "module-name","version": "10.3.1","description": "An example module to illustrate the usage of a package.json","author": "Your Name <you.name@example.org>","contributors": [{ "name": "Foo Bar","email": "foo.bar@example.com" }],"bin": { "module-name": "./bin/module-name" },"scripts": { "test": "vows --spec --isolate","start": "node index.js","predeploy": "echo im about to deploy","postdeploy": "echo ive deployed","prepublish": "coffee --bare --compile --output lib/foo src/foo/*.coffee" },"main": "lib/foo.js","repository": { "type": "git","url": "https://github.com/nodejitsu/browsenpm.org" },"bugs": { "url": "https://github.com/nodejitsu/browsenpm.org/issues" },"keywords": [ "nodejitsu","example","browsenpm" ],"dependencies": { "primus": "*","async": "~0.8.0","express": "4.2.x","winston": "git://github.com/flatiron/winston#master","bigpipe": "bigpipe/pagelet","plates": "https://github.com/flatiron/plates/tarball/master" },"devDependencies": { "vows": "^0.7.0","assume": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0","pre-commit": "*" },"preferGlobal": true,"publishConfig": { "registry": "https://your-private-hosted-npm.registry.nodejitsu.com" },"subdomain": "foobar","analyze": true,"license": "MIT" }

原文链接：https://www.f2er.com/react/303873.html