react-native-template-mah v0.0.4
react-native-template-mah简介
这是一个关于react-native的模版,用于新项目的初始化或者是作为RN的练习项目
该模版集成了RN常用的第三方组件,如react-navigation、netinfo等,采用mobx作为数据管理。
使用
新建项目的时候使用如下命令
react-native init XXX --template mah
其中XXX为项目的名称可以随便填写,后面mah即指定为以react-native-template-mah
为模版新建项目。命令执行完成之后,进入项目根目录
cd XXX
npm install
react-native run-ios && react-native run-android
目录结构
.
├── src
| ├── app.js // app 配置文件
| ├── compenents // 组件
| ├── constant // 常量
| ├── image // 图片资源
| ├── mobx // mobx逻辑处理
| ├── pages // 页面文件
| └── untils // 常用工具
├── index.js // app 入口文件
├── .eslintrc.js // eslint配置文件
├── .prettierrc.js // prettier配置文件
└── .flowconfig.js // flow配置文件
功能简介
mobx
该模版采用mobx作为数据管理工具,在App.js中提供了Provider方法以方便子组件通过inject的方式注入。inject的方式一般用于注入配置之类的数据,对于具体每个页面中的store还是推荐import引入并初始化的方式。一个页面对应一个store管理,对于页面来说需要有一个类似container的父组件调节组件与数据之间的关系,而其子组件使用纯函数创建以确保组件的复用性。
关于mobx的具体的使用方法请参照mobx官网
react-navigation
react-navigation 3.x与之前的版本有些许不同,但常用的方法依旧是StackNavigation和TabNavigation。通过react-navigation组织页面关系,将所有的跳转配置以及页面配置都在app_router.js下。这种集中的处理方式,为后续维护带来很大的便利。
在自己的项目中引入react-navigation,如果报错的话请查看是否已经安装react-native-gesture-handler
npm install --save react-native-gesture-handler react-native link react-native-gesture-handler
axios
模版中采用了axios作为请求工具,具体方法可查看axios的github。在untils/request.js中简单的封装了post和get请求,通过Promise的方式返回数据。
其他功能
引入了eslint和prettier作为代码规范的检查
引入flow做参数类型检查
- 实现了换肤功能,为了展示inject的用法
- 定义了一些简单的常量,如屏幕宽高