模版
项目模版就是在项目创建之后，默认带的一些文件。比如用react-native-cli创建的项目，运行之后就会看到react-native为你预设的模版
hello world。这里就介绍一下如何创建自己的模版工程，将一些常用的功能放入模版之中，以后再新建项目不必从头开始配置了。
创建模版
通过如下命令创建模版工程
react-native init XXX --template AAA
其中AAA是你的模版在npm上的名称，可以供别人使用。新建完工程之后，它和普通的项目没有区别。可以在上面加入你需要的功能。完成之后在package.json中修改你的模版名称以及版本号
{
"name": "react-native-template-AAA",//上传 NPM 仓库的名称
"version": "0.0.2"//版本号，同一仓库不可以上传两次同版本号的内容
}
之后就可以上传至npm官网上。注册完账号之后在命令行中登录
npm adduser --registry http://registry.npmjs.org
之后进入你的模版工程目录发布即可
npm publish --registry http://registry.npmjs.org
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的用法
-
定义了一些简单的常量，如屏幕宽高
网友评论