随着代码复杂性的提高,对代码进行分层以及抽象是十分必要的.今天我们就对RN的项目结构进行简单的梳理.
这里主要是对样式文件和组件进行分离.可以以业务模块或者以页面的形式划分层级.具体结构如下
- [ ] Project ROOT
- [ ] index.ios.js
- [ ] index.android.js
- [ ] android
- [ ] ios
- [ ] resources – 存放各类静态资源文件
- [ ] src – 源代码目录
- [ ] module –业务模块
- [ ] module.js – 业务模块组件
- [ ] module.style.js – 业务模块样式
- [ ] module –业务模块
目前关于RN的分层结构没有特定的最佳实践,大家可以根据自己的理解进行组织.
这里之所以将样式文件与业务模块同级存放主要是由于在import的时候from语句后面的参数是依据当前文件所在的相对路径进行查找,存放在同级目录可以比较方便的进行引用.Login.js
中如果需要引入Login.style.js
可如下书写
Module.js
'use strict'
import React,{View,Text} from 'react-native'
{
/**这里styles是引入后的别名,可以在需要的地方以styl