Skip to content

react native 工程目录结构说明

fushang318 edited this page Sep 22, 2016 · 4 revisions

基本结构

react native 是构建在 android 和 ios 原生SDK之上的一个SDK
所以一个 react native 工程包括三部分内容:

  1. 原生 android 工程
  2. 原生 ios 工程
  3. react native 相关内容

我们通过一个新建的 react native 工程来介绍它的目录结构,首先命令行运行 react-native init ares 创建一个新的 react native 工程,目录结构如下

ares
 |-- android
 |-- ios
 |-- index.android.js
 |-- index.ios.js
 |-- package.json

ares/android 这个文件夹下是一个原生 android 工程
ares/ios 这个文件夹下是一个原生 ios 工程
ares/package.json react native 用的是 javascript 语言,所以使用了 npm 作为包管理,这个文件就是 npm 的包管理文件
ares/index.ios.js 这个文件是工程打包并在 ios 设备上运行时的入口文件
ares/index.android.js 这个文件是工程打包并在 android 设备上运行时的入口文件

运行npm install后,ares 目录下会增加一个 node_modules 目录

ares
 |-- android
 |-- ios
 |-- node_modules
 |-- index.android.js
 |-- index.ios.js
 |-- package.json

ares/node_modules 目录下存放了 npm 包管理根据 package.json 文件中的依赖声明,从公网下载下来的第三方 react native npm 包源代码

编写 react native js 代码

在实际项目中,我们会编写很多 react native 的 js 代码
为了使源代码文件更好的组织,我们创建 ares/app 目录来存放 react native 的 js 代码

ares
 |-- android
 |-- ios
 |-- app
 |-- node_modules
 |-- index.android.js
 |-- index.ios.js
 |-- package.json

我们把所有编写的 react native js 代码都放到 ares/app 目录下(这个目录下还可以在细分目录,具体如何细化,在项目进行中,我们再逐渐优化)

编写 react native 原生模块

有些功能用纯 react native js 很难或者完全不能实现
这个时候就需要借助平台原生API来实现
react native 提供了 js + 平台原生代码 混合使用实现某些功能的方法
这个时候就需要编写平台原生代码

ares/android 下编写 android 原生代码
ares/ios 下编写 ios 原生代码
ares/app 下编写 react native js 接口代码

引入第三方 react native npm 包

很多基础功能可以借助第三方 react native npm 包来实现
首先通过如下命令安装 npm 包:

# 这个命令做了两件事情
# 1 把 <package_name> 加入 ares/package.json 文件的依赖声明中
# 2 下载 <package_name> 代码到 ares/node_modules 目录下
npm install <package_name> --save

运行完后,会增加 ares/node_modules/<package_name> 目录,这个目录就是 <package_name> 这个包的源代码

一般 react native npm 源代码的主要构成有如下几种情况:

  1. npm 源代码中只有 react native js 代码
  2. npm 源代码中有 react native js 代码和 android 原生代码
  3. npm 源代码中有 react native js 代码和 ios 原生代码
  4. npm 源代码中有 react native js 代码,android 原生代码和 ios 原生代码

对于第 1 种情况的 npm 包,运行完npm install <package_name> --save 后就可以在 js 中直接使用了

对于第 2,3,4 种情况还需要额外的配置,配置步骤都大径相同,并且一般 npm 源代码的 readme 中会写配置说明
比如 https://github.com/lwansbrough/react-native-camera 就是一个典型的第 4 种情况的 react native npm 包,它的 readme 中写明了如何配置,一般使用 Manual install 配置方式比较保险,automatic install 有可能会漏掉一些配置

引入第三方 react native npm 源代码到版本库

ares/node_modules 中的代码并没有提交到版本库
而是每次运行 npm install 时,都会从公网同步到 ares/node_modules
但是实际项目中,我们引入的一些第三方 react native npm 包并不能满足我们项目的需求,还需要进行一些修改才能使用
这个时候我们就需要把这些第三方 react native npm 包的源代码放到版本库中,方便修改使用

我们创建 ares/libs 目录来专门放置这些第三方 react native npm 包的源代码
比如 ares/libs/react-native-barcodescanner 目录放置的是二维码扫描的一个第三方 react native npm 包

总结

ares
 |-- android
 |-- ios
 |-- app
 |-- node_modules
 |-- libs
 |-- index.android.js
 |-- index.ios.js
 |-- package.json

ares/android 原生 android 工程
ares/ios 原生 ios 工程
ares/app react native js 代码目录
ares/node_modules npm install 生成的
ares/libs 手动引入进来的 npm 包,方便对其修改使用
ares/package.json npm 的包管理文件
ares/index.ios.js 在 ios 设备上运行时的入口文件
ares/index.android.js 在 android 设备上运行时的入口文件