一、集成

1、搭建环境

调整目前项目工程的文件夹结构，新建一个RNUtil文件夹来存放所有rn相关的文件

2、添加RN依赖相关文件

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

}

示例中的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版本。其他第三方能用则用，不能用则只能考虑选择其他库。

接下来使用 npm来安装React 和 React Native 。

npm安装成功后会发现多出来一个node_modules文件夹

3、编辑Podfile文件，安装rect到项目中

在podfile文件中添加rn相关的模块导入

# 'node_modules'目录一般位于根目录中 # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path` pod 'React', :path => '../node_modules/react-native', :subspecs => [

    'Core',

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

    'RCTNetwork',

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

  # 如果你的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'

然后执行 pod install

4、代码集成

在RNUtil 文件夹下创建 index.js文件

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);

5、原生调用

需要先导入 <React/RCTRootView.h>

原生代码调用，需要配置本地的ip地址

二、打包把index.js打包成bundle文件

  这里说一下为什么要打包？

因为在ios 项目中要访问rn会从一个bundle文件里面去查找，然后再加载出来。rn的热更新也是基于这个bundle文件更新的。

打包过程如下：

 react-native bundle --entry-file ./index.js --bundle-output ../bundle/index.js.jsbundle --platform ios --assets-dest ../bundle/ --devfalse

-entry-file 指定入口文件 因为要打包ios平台，所以指定为rn项目的index.ios.js作为入口

–bundle-output 指定输出的jsbundle文件路径和文件名 指定到rn项目的ios工程文件夹下，记得一定要先创建bundle文件夹，不然终端会报文件夹找不到的错误

–platform 指定平台类型

–assets-dest 指定资源文件夹路径 assets文件夹的路径，包含图片、node模块等资源

–dev 是否为开发模式 如果设置为false，不会产生警告，并且bundle会被压缩

还有其他命令，比如：transformer、prepack、bundle-encoding等，可以到官网查看具体介绍。

完成后bundle生成完成后，终端会有类似提示： 

三、真机运行访问不到服务器报错

1）、先进入项目的rn目录，把npm先启动起来

2）把本地的localhost换成PC上的IP地址 192.168.18.142，且PC上的地址和手机上的同一局域网 OK

3）打开info.plist文件，添加

【图5】

4）然后手机启动起来后摇动手机，选择Debug JS Remotely，这样在电脑上修改保存之后就可以直接显示在手机上了，不需要再次运行

大功告成了，有点小小的成就感(*^__^*) 嘻嘻……