小蚂蚁工具ant-tool

快速开始

• 脚手架安装(待实现)

使用[npm]安装quick-boot: npm install -g quick-boot

然后创建基础项目: quick-boot rn helloworld 即可创建基础项目，基础项目中包含了beeshell组件可以直接使用

参考https://github.com/Meituan-Dianping/beeshell

• 单独引入组件

使用npm安装: npm install ant-tool

还需要引入其他组件，注意版本

//本地存储
yarn add @react-native-community/async-storage@^1.7.0
//导航
yarn add react-native-reanimated@^1.4.0
yarn add [email protected]
yarn add yarn add react-native-gesture-handler@^1.5.2
yarn add react-navigation@^4.0.10
yarn add react-navigation-stack@^1.10.3
yarn add react-navigation-tabs@^2.6.2
//等待
yarn add react-native-spinkit@^1.5.0
//图标
yarn add react-native-vector-icons@^6.6.0
//美团组件
yarn add beeshell



//es7编译
yarn add @babel/plugin-proposal-decorators@^7.7.4 -D

引入后需要在根目录下面babel.config.js中增加下面配置

plugins:[
   + ["@babel/plugin-transform-flow-strip-types"],
   + ["@babel/plugin-proposal-decorators", { "legacy": true }],
   + ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]

图标配置

打开android/app/build.gradle文件，在最后面增加下面的配置

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

特点

• 集成DVA，管理全局数据
• 轻度封装父类组件，封装网络请求，更新状态等，使用更方便
• 轻度包装常用组件
• 轻度包装常用工具使用

初始化

集成开发时，需要初始化启动页面入口

import React from 'react';
import Route from './Route';
import {AntTool} from 'ant-tool';

/**
 *  初始化
 * @type {AntTool}
 */
//初始化 配置
const app = AntTool.Init({
    appId:"123",
    Config:{
        ShowHttpErrorMsg:"自定义网络请求错误描述",
    },
    // 回退页面监听
    BackListenerPages:["Home"]
})

const BootStrap = app.createRootView(Route);

export default BootStrap;

其中Route为启动入口页面

初始化配置有一部分默认配置，具体如下:

    //网络请求异常后，通过回调返回还是放入state中，如果为true,直接Toast错误信息，否则放入state中，key为HttpError
    ShowHttpError:true,
    ShowHttpErrorMsg:"网络访问错误，请稍后再试!",
    //loading超时关闭后提示信息
    LoadingAutoCloseMsg:"请稍后再试!",
    //等待样式  Wave,
    LoadingType:"Wave",
    //等待样式颜色
    LoadingColor:Colors.THEME_COLOR,
    //android监听返回键关闭应用配置
    BackListenerPages:[]

说明

组件版本

    "@react-native-community/async-storage": "^1.7.0",
    "dva-core": "^2.0.1",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-reanimated": "^1.4.0",
    "react-native-root-toast": "^3.2.0",
    "react-native-screens": "1.0.0-alpha.23",
    "react-native-spinkit": "^1.5.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.6.2",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4"

工具

Toast

手机展示短暂提示信息

引入

import Toast from 'ant-tool';

使用

Toast("Hello,World!")

Loading

针对耗时操作增加等待进度，提高友好性；默认关闭时间为10s，可以通过全局配置

使用

集成MyPureComponent后可以直接使用

//显示加载组件
this.ShowLoading();

//关闭加载组件
this.HideLoading();

通过工具类使用

import BaseUtils from 'ant-tool';
BaseUtils.Loading(put,isShow);

BaseUtils

常用工具集合

引入

import BaseUtils from 'ant-tool';

GetConfig

获取全局配置

UpdateStoreData

更新全局store数据

本地缓存MyLocalStore

小型的数据可以存入本地缓存，方便使用

API

| 方法名称 | 参数 |描述 | | ---- | ---- | ---- | get | (key,isJson) |根据key获取缓存数据，isJson是否转换为json格式数据 | | set | (key, val, isJson) |根据key设置缓存数据，isJson是否转换为json格式数据 | | remove | (key) |根据key移除缓存数据 | | clear | |清空缓存 |

组件

MyPureComponent

基础父类组件，大部分的组件可以继承该组件，组件中包含了大部分常用方法

如何引入

import MyPureComponent from 'ant-tool';

如何使用

class My extends MyPureComponent{

}

API

| 方法名称 | 参数 |描述 | | ---- | ---- | ---- | ModifyTitleName | (titleName) |动态修改标题内容，注意，修改后需要置为空，否则是全局修改 | | Navigate | (routeName, params) |路由到某个界面 | | GoBack | |关闭当前页面，回退到上一个页面 | | ShowLoading | |展示进度 | | HideLoading | |关闭进度 | | UpdateStore | (bindKey,data) |根据bindKey更新全局数据 | |CommonRequest|(url,params,bindKey,callBack,useLocalState)|网络请求，useLocalState可以控制返回数据是否绑定到当前组件state还是全局store，默认为state| | CommonCallBackRequest | (url,params,callBack,useLocalState) | 网络请求，返回结果通过回调方式处理 |

MyStatusBar

通用状态栏组件,可以通过属性进行自定义配置组合

引入

import MyStatusBar from 'ant-tool';

属性

| 属性名称 | 说明 | | ---- | ---- | navigation | 导航传入属性 | title | 标题 | titleStyle | 标题样式 | titleView | 中间视图 | proportion | 标题布局flex占位比 | forwardLabelText | 右边文字内容 | forwardLabelTextStyle | 右边文字样式 | backView | 左边视图 | backLabelIcon | 左边视图图标 | onPressBack | 左边点击事件，默认为返回上一个页面 | onForwardPress | 右边点击事件 | forwardView | 右边视图 | containerStyle | 容器样式 | hasTitle | 是否渲染标题内容

MyPinKeyboard

密码输入弹出框组件

如何引入

import MyPinKeyboard from 'ant-tool';

如何使用

<MyPinKeyboard
                    ref="modal"
                    height={350}
                    title={"请输入PIN码"}
                    length={6}
                    onDone={(pin) => {
                        alert(pin);
                        this.refs.modal.hide();
                    }}
                  ></MyPinKeyboard>

属性

| 属性名称 | 说明 | | ---- | ---- | height | 密码输入高度 | title | 标题 | length | 密码长度 | onDone | 密码输入完成后回调

API

| 方法名称 | 参数 |描述 | | ---- | ---- | ---- | show | |显示密码框 | | hide | | 隐藏密码框 |