react-native模版

模版

项目模版就是在项目创建之后，默认带的一些文件。比如用react-native-cli创建的项目，运行之后就会看到react-native为你预设的模版

hello world。这里就介绍一下如何创建自己的模版工程，将一些常用的功能放入模版之中，以后再新建项目不必从头开始配置了。

创建模版

通过如下命令创建模版工程

1	react-native init XXX --template AAA

其中AAA是你的模版在npm上的名称，可以供别人使用。新建完工程之后，它和普通的项目没有区别。可以在上面加入你需要的功能。完成之后在package.json中修改你的模版名称以及版本号

{
    "name": "react-native-template-AAA",//上传 NPM 仓库的名称
    "version": "0.0.2"//版本号，同一仓库不可以上传两次同版本号的内容
}

之后就可以上传至npm官网上。注册完账号之后在命令行中登录

1	npm adduser --registry http://registry.npmjs.org

之后进入你的模版工程目录发布即可

1	npm publish --registry http://registry.npmjs.org

react-native-template-mah简介

这是一个关于react-native的模版，用于新项目的初始化或者是作为RN的练习项目

该模版集成了RN常用的第三方组件，如react-navigation、netinfo等，采用mobx作为数据管理。

使用

新建项目的时候使用如下命令

1	react-native init XXX --template mah

其中XXX为项目的名称可以随便填写，后面mah即指定为以react-native-template-mah为模版新建项目。命令执行完成之后，进入项目根目录

1
2
3

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 3.x与之前的版本有些许不同，但常用的方法依旧是StackNavigation和TabNavigation。通过react-navigation组织页面关系，将所有的跳转配置以及页面配置都在app_router.js下。这种集中的处理方式，为后续维护带来很大的便利。

在自己的项目中引入react-navigation，如果报错的话请查看是否已经安装react-native-gesture-handler
1
2
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的用法
定义了一些简单的常量，如屏幕宽高

参考资料

《React Native高效开发》之 template