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的用法

• 定义了一些简单的常量，如屏幕宽高