要说React Native最大的优势，那就是跨平台。通过JavaScript来开发iOS及Android端的应用，并驱动原生组件渲染（逻辑用js编写，UI都是原生的）。废话不多说，先来讲一下使用React Native前的准备工作。
⚠️本人使用的React Native版本号是0.42.3，支持iOS 8.0及以上
一、下载Node.js
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
官网下载地址：https://nodejs.org/en/
国内镜像地址：http://nodejs.cn/download/
下载完成后按步骤安装，最后会将Node.js与npm安装到本机。npm是Node.js包管理器。
二、安装React Native命令行工具
在终端输入：npm install -g react-native-cli
三、可以选择性的安装插件
- Watchman
是一款安全软件，可以监视文件并且记录文件的改动情况，当文件变更时它可以触发一些操作。
在终端输入：brew install watchman
其中的brew是Mac OSX上的软件包管理工具。 - Flow
是 Facebook 推出的一个开源的 JavaScript 静态类型检查器，可以发现 JS 程序中的类型错误，以提高开发效率和代码质量。
在终端输入：brew install flow
四、创建新的React Native项目
在终端输入：react-native init HelloRNT
其中的HelloRNT是可以随意更换的项目名称。
当项目创建成功后，打开项目文件夹，大致目录如下图：
-
index.ios.js
是自动生成的React Native应用入口文件，它是不可或缺的！React Native会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前运行的平台加载正确对应的文件。文件中的代码是用于生成一个视图组件，部分代码如下：/* 引入React Native组件 */ import React, { Component } from 'react'; import { View, TouchableOpacity, Text, TextInput, Image, Platform, AppRegistry } from 'react-native'; /* 引入第三方组件 */ import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' import ImagePicker from 'react-native-image-picker'; import Picker from 'react-native-picker'; import I18n from 'react-native-i18n'; // 定义一个组件HelloRNT，会用于注册组件API的第二个参数 export default class HelloRNT extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </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> ); } } /* 参数1：组件的名称，任意字符串，但是一定要与之后创建RCTRootView时moduleName参数的传入值一致 参数2：定义的组件，如上的HelloRNT */ AppRegistry.registerComponent('HelloRNT', () => HelloRNT); ios
包含HelloRNT.xcodeproj等文件，点击Xcode会打开创建的React Native项目。node_modules
是Node.js的组件模块，其中包含了React Native项目的启动配置脚本等文件，当然，开发会用到的UI等组件也包含在里面。另外通过npm安装的第三方组件也都在这个目录下。package.json
是自动生成的包文件，当我们开发React Native应用的时候，可能会用到第三方类库，比如一些优秀的UI控件等，这时候我们需要在dependencies这一栏中配置上相应的库，然后在终端输入npm install 或者是直接在终端输入 npm install react-native-image-picker --save 意思是安装image-picker模块，--save表示将其配置到package.json文件中，其他需要关联的库类似。这里安装后，index.ios.js里才能import
// 这里在基础上又增加了三个依赖库，其中^version代表兼容某个版本
"dependencies": {
"react": "15.4.2",
"react-native": "0.42.3",
"react-native-flexi-radio-button": "^0.1.5",
"react-native-image-picker": "^0.25.5",
"react-native-picker": "^4.0.18",
},
最后需要在Xcode中导入第三方组件库。要注意的是，有些并不需要导入，比如react-native-flexi-radio-button，那么如何区分需要导入跟不需要导入的组件呢？看下载下来的组件文件夹，如下图：
导入后在项目中有关React Native的路径如下图：
不要忘记相关的.a也要加到项目中。这里介绍的是手动导入，当然也有自动导入，大家可以根据喜好选择。任何一个正规的第三方组件都有安装说明，可以根据说明自行摸索其他方法。
附上第三方组件下载平台：https://js.coach/react-native
五、将React Native引入iOS项目
终于到关键的步骤了。既然是引入到已经有的iOS项目中，为什么还要经历第四步？简单说就是要得到node_modules及其他一些文件。
这里将React Native引入到已经创建好的RNTest项目中：
-
引入React Native
打开RNTest文件夹，将node_modules及需要的其他文件拷贝到里面。完成后目录大致如下图：
-
添加React Native组件，可根据需要决定添加哪些
2.1 右击项目名称并选择New Group选项，将其命名为RNTLibraries。
2.2 将静态库工程React.xcodeproj增加到RNTLibraries文件夹，React.xcodeproj路径见下图：
2.3 将其他静态库工程增加到RNTLibraries文件夹，路径见下图：
添加完成后项目目录大致如下图：
2.4 将静态库添加到项目，完成后如下图：
2.5 增加运行脚本，具体过程见下图：
完成后如下图：
-
编译运行
3.1 此时Xcode可能会提示“React/xxx.h”不能发现的错误。由于引入的静态库工程之间有相互依赖关系，比如一些静态库工程依赖于React.xcodeproj工程，那么必须先编译React.xcodeproj。解决方法也简单，只需要打开Edit Scheme配置一下，完成后的截图如下：
3.2 如果仍然报错的话，我们还需要配置React相关的头文件路径，见下图：
3.3 Xcode可能还会提示一堆有关链接的错误，我们还需要配置Other Linker Flags项，见下图：
这时候再按Command+B，Xcode提示Build Succeeded，OK，大功告成！
对于如何更好的使用React Native，可以参考http://facebook.github.io/react-native/docs/getting-started.html。
关注微信公众号CodingArtist，可以第一时间得到文章更新通知! _
