项目已经迭代了很多版本，目前想在里面集成React native。以下是操作步骤，由于一些坑已经趟过，直接按照解决后的顺序下的步骤。本文集成的RN版本是 0.51.0

集成篇

步骤1：设置项目目录结构

首先创建一个空目录用于存放React Native项目，然后在其中创建一个/ios子目录，把你现有的iOS项目拷贝到/ios子目录中。

步骤2：安装JavaScript依赖包

在项目根目录下创建一个名为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.51.0”

    }

}

执行命令 npm install

步骤3：安装CocoaPods（如果已经安装就不需要安装了）

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

配置CocoaPods的依赖#React Native框架整体是作为node模块安装到项目中的。下一步我们需要在CocoaPods的Podfile中指定我们所需要使用的组件。在你开始把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库（即组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。

我们需要在Podfile文件中指定所需的subspec。创建Podfile的最简单的方式就是在/ios子目录中使用CocoaPods的init命令：

创建 Podfile 文件，命令： pod init

Podfile会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的Podfile的内容看起来类似下面这样：

platform :ios, '8.0'

target ‘xxxxx’ do

    pod 'SDWebImage', '~> 3.8.2'

    pod 'AFNetworking', '~> 3.0.1'

    pod 'MJRefresh' pod 'yoga', :path => '../node_modules/react-    native/ReactCommon/yoga'

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

            'Core',

'CxxBridge', # 如果RN版本 >= 0.45则加入此行

'DevSupport',# 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单

            'RCTText',

            'RCTNetwork',

            'RCTWebSocket', # 这个模块是用于调试功能的 # 在这里继续添加你所需要的RN模块

    ]

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

如果未出现xcworkspace 文件，那么更新cocoapods 版本，重新install。

install时有几个库特别慢，这里参考 RN中文网

注意：自己弄的时候，boost的库版本（取决于你rn的版本）和上面链接里面给出的版本不一致。建议自己根据版本号在 boost官网下载下来，下载下来后请copy到 ~/.rncache

另外需要做几个配置：

1、配置自己的TARGEETS，Build Setting->Linking->Other Linker Flags，添加$(inherited)

2、配置pod PROJECT，Build Setting->Valid Architectures 为 armv7 arm64

3、配置自己的TARGEETS，Build Setting->Search Paths->User Header Search Path 为$(PODS_ROOT)，并选择为 recursive

4、配置自己的TARGEETS，Build Setting->Build Active Architecture Only 的debug 改为yes

注：编译后生成的三方库的.a文件的位置在

/Users/自己mac的用户名/Library/Developer/Xcode/DerivedData/xxxxx-dpnlhuluxbuuuggyyhxbpkzutkvl/Build/Products/Debug-iphoneos/

做到此，那么工程已经全部集成进来了

RN运行篇

1、编辑生成个index.js文件，放到主目录下

其中 0.49.0 版本以前 index.ios.js 。内容为

import React from 'react';

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

class RNHighScores extends React.Component

{

    render() {

return (

<View stayle={styles.container}>

<Text style={styles.highScoresTitle}>

                        测试1

                    </Text>

<Text style={styles.scores}>

测试2

                    </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, },

});

AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);

2、项目中增加跳转，主要是写个点击事件。执行方法内容为

NSURL *jsCodeLocation;

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

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MyReactNativeApp" initialProperties:nil launchOptions:nil]; UIViewController *vc = [[UIViewController alloc] init];

vc.view = rootView; [self.navigationController pushViewController:vc animated:YES];

3、打开工程运行，点击按钮，发现报错了 “react-native No bundle URL present”

别慌，因为没bundle，bundle 是干啥的呢？这个是rn的资源文件，所有的js 文件会在这个里面的。

分三种情况：

1、开发模式，一般是命令行进入主目录，然后执行 npm start ，此时bundle可以下载（服务器就是本机）

2、release 模式，会将bundle打包到项目里。(使用curl命令生成 main.jsbundle

curl http://localhost:8081/index.ios.bundle -o main.jsbundle

)

注释：你可以用 react-native-xcode.sh 来帮助部署，路径 node_modules/react-native/scripts/

3、已经发布的包更行，会出发下在，然后替换打到项目里的 bundle

我们开发阶段，采用第一种。

运行项目，恭喜你，已经集成成功了。

页面的具体开发，需要您不断探索了。

希望以上对你有帮助。以上部分内容参考 RN中文网

ios 项目集成 React native RN

ios 项目集成 React native RN

集成篇

步骤1：设置项目目录结构

步骤2：安装JavaScript依赖包

步骤3：安装CocoaPods（如果已经安装就不需要安装了）

RN运行篇

1、编辑生成个index.js文件，放到主目录下

2、项目中增加跳转，主要是写个点击事件。执行方法内容为

3、打开工程运行，点击按钮，发现报错了 “react-native No bundle URL present”

ios 项目 集成 React native RN

集成篇

步骤1：设置项目目录结构

步骤2：安装JavaScript依赖包

步骤3：安装CocoaPods（如果已经安装就不需要安装了）

RN运行篇

1、编辑生成个index.js文件，放到主目录下

2、项目中增加跳转，主要是写个点击事件。执行方法内容为

3、打开工程运行，点击按钮，发现报错了 “react-native No bundle URL present”

ios 项目集成 React native RN