在原有iOS项目上集成一个ReactNative页面教程；

首先需要安装基本的ReactNative的基础环境；

安装必需的软件

Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

sudo chown -R `whoami` /usr/local

之后，就上一步的安装命令

Node

使用Homebrew来安装Node.js.

React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。

brew install node

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native的命令行工具（react-native-cli）

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：

sudo chown -R `whoami` /usr/local

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。

推荐安装的工具

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。译注：此工具官方虽然是推荐安装，但在实践中，我们认为此工具是必须安装，否则可能无法正常开发。

brew install watchman

等待安装完毕即可；

Xcode

新建一个新工程；

首先在工程文件根目录，新建我们安装ReactNativede文件夹；

在根目录新建集成ReactNative的文件夹

一、添加package.json文件

cd到上一步骤新建的文件夹，之后新建文件并命名为package.json，进入编辑界面。

touch package.json

vim package.json

网上找的教程添加的代码需要修改成我提供的这些（我已经入坑了，所以找过了出坑方法），不然使用的时候会出现问题；

代码修改对比（右侧为我使用的）

name对应的是你自己命名的，并且记住，因为在项目中使用的时候要使用这个名字；

{

    "name": "learniOS",

    "version": "0.0.1",

    "private": true,

    "scripts": {

                "start": "node node_modules/react-native/local-cli/cli.js start",

                "test": "jest"

                },

    "dependencies": {

                "react": "16.0.0-alpha.6",

                "react-native": "0.44.3"

                },

    "devDependencies": {

                "babel-jest": "23.0.1",

                "babel-preset-react-native": "4.0.0",

                "jest": "23.0.1",

                "react-test-renderer": "16.0.0-alpha.6"

                },

    "jest": { "preset": "react-native" }

}

二、安装react-native模块

终端cd到package所在目录，然后执行

npm install

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

在终端之中添加之后，使用js编辑软件添加代码，推荐使用webstorm。

import React, { Component } from 'react';

import {

            AppRegistry,

            StyleSheet,

            Text, View

} from 'react-native';

class learniOS extends Component {

    render() {

        return (

                    <View style={styles.container}>

                    <Text style={styles.welcome}>                    

                    Welcome to React Native!haha

                    </Text>

                    <Text style={styles.welcome}>

                    To get started, edit index.ios.js

                     </Text>

                    <Text style={styles.welcome}>

                    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('learniOS', () => learniOS);

注意在这里的红框两处的名字与你命名（是对于ReactNative的命名，就是在RN文件夹创建的package的命名）应保持一致。

四、集成react-native框架

这里就使用到了CocoaPods的框架了，所以此时应回到项目的根目录，因为这里的cocoapods与ReactNative是独立存在的。

创建的Podfile并编辑，相信都会基本的步骤

platform :ios,'9.0'

target ‘ReactNative’ do

    pod 'AFNetworking'

    pod 'JPush'

    pod 'React', :path => './RN/node_modules/react-native', :subspecs => [

        'Core',

        'ART',

        'RCTActionSheet',

        'RCTGeolocation',

        'RCTImage',

        'RCTNetwork',

        'RCTPushNotification',

        'RCTSettings',

        'RCTText',

        'RCTVibration',

        'RCTWebSocket',

        'RCTLinkingIOS'

    ]

    pod 'Yoga', :path => './RN/node_modules/react-native/ReactCommon/Yoga'

end

此处的yoga，在pod集成的时候会报错，所以要改变y的大小写，包括后面路径中的yoga中y大小写，很奇怪

之后是用终端命令进行pod的安装

pod inatsll

五、项目中使用

找到你想集成的控制器中，添加js的创建代码

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

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"learniOS" initialProperties:nil launchOptions:nil]; 

[rootView setFrame:self.view.bounds];    

[self.view addSubview:rootView];

头部引入.h，如果不自动填充，则应在项目中修改

头文件引入问题

在plist中设置上网；

运行项目，也许会发现问题

是因为Reactnative的本地服务没有开启。此时应在终端cd进入我们新建的那个专门存放ReactNative相关的文件夹，终端输入npm start 等待运行完毕，也许重复运行Reactnative会造成端口重复开启的错误，用提示的命令关闭端口即可，重新开启ReactNative，再次重启项目，就会发现

运行成功