# 小蚂蚁工具ant-tool

## 快速开始

- 脚手架安装(待实现)

使用[[npm](https://www.npmjs.com/)]安装quick-boot: `npm install -g quick-boot`

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


参考[https://github.com/Meituan-Dianping/beeshell](https://github.com/Meituan-Dianping/beeshell)

- 单独引入组件

使用[npm](https://www.npmjs.com/)安装: `npm install ant-tool` 

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

```shell script
//本地存储
yarn add @react-native-community/async-storage@^1.7.0
//导航
yarn add react-native-reanimated@^1.4.0
yarn add react-native-screens@1.0.0-alpha.23
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中增加下面配置
```json
plugins:[
   + ["@babel/plugin-transform-flow-strip-types"],
   + ["@babel/plugin-proposal-decorators", { "legacy": true }],
   + ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
```

**图标配置**

打开android/app/build.gradle文件，在最后面增加下面的配置
```shell script
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```


## 特点

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

## 初始化
集成开发时，需要初始化启动页面入口
```js
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为启动入口页面

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

## 说明
组件版本
```shell script
    "@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
手机展示短暂提示信息
#### 引入
```js
import Toast from 'ant-tool';
```
#### 使用
```js
Toast("Hello,World!")
```

### Loading
针对耗时操作增加等待进度，提高友好性；默认关闭时间为10s，可以通过全局配置
#### 使用
集成`MyPureComponent`后可以直接使用
```js
//显示加载组件
this.ShowLoading();

//关闭加载组件
this.HideLoading();
```
通过工具类使用
```js
import BaseUtils from 'ant-tool';
BaseUtils.Loading(put,isShow);
```

### BaseUtils
常用工具集合
#### 引入
```js
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
基础父类组件，大部分的组件可以继承该组件，组件中包含了大部分常用方法
#### 如何引入
```js
import MyPureComponent from 'ant-tool';
```
#### 如何使用
```js
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
通用状态栏组件,可以通过属性进行自定义配置组合
#### 引入
```js
import MyStatusBar from 'ant-tool';
```
#### 属性
| 属性名称 | 说明 | 
| ---- | ---- 
| navigation | 导航传入属性 
| title | 标题
| titleStyle | 标题样式
| titleView | 中间视图
| proportion | 标题布局flex占位比
| forwardLabelText | 右边文字内容
| forwardLabelTextStyle | 右边文字样式
| backView | 左边视图
| backLabelIcon | 左边视图图标
| onPressBack | 左边点击事件，默认为返回上一个页面
| onForwardPress | 右边点击事件
| forwardView | 右边视图
| containerStyle | 容器样式
| hasTitle | 是否渲染标题内容

### MyPinKeyboard
密码输入弹出框组件
#### 如何引入
```js
import MyPinKeyboard from 'ant-tool';
```
#### 如何使用
```js
<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 | | 隐藏密码框 |