react native 工程目录结构说明
react native 是构建在 android 和 ios 原生SDK之上的一个SDK
所以一个 react native 工程包括三部分内容:
- 原生 android 工程
- 原生 ios 工程
- 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 代码
为了使源代码文件更好的组织,我们创建 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 js 很难或者完全不能实现
这个时候就需要借助平台原生API来实现
react native 提供了 js + 平台原生代码 混合使用实现某些功能的方法
这个时候就需要编写平台原生代码
在 ares/android
下编写 android 原生代码
在 ares/ios
下编写 ios 原生代码
在 ares/app
下编写 react native js 接口代码
很多基础功能可以借助第三方 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 源代码的主要构成有如下几种情况:
- npm 源代码中只有 react native js 代码
- npm 源代码中有 react native js 代码和 android 原生代码
- npm 源代码中有 react native js 代码和 ios 原生代码
- 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
有可能会漏掉一些配置
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 设备上运行时的入口文件