一、集成

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 => ( {score.name}:{score.value} {"\n"} )); return ( 2048 High Scores! {contents} ); } } 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、原生调用

需要先导入