从零手动将React Native引入现有iOS项目

2017-03-24 本文已影响298人莮亾

要说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，那么如何区分需要导入跟不需要导入的组件呢？看下载下来的组件文件夹，如下图：

带有examples(例子)文件夹的不需要导入到Xcode

这是需要导入到Xcode工程的
导入后在项目中有关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项，见下图：