ant-tool v0.0.26

小蚂蚁工具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 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

//权限配置,参考RequestPermission方法
yarn add react-native-permissions

//相机组件
yarn add react-native-camera

//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，管理全局数据
• 轻度封装父类组件，封装网络请求，更新状态等，使用更方便
• 轻度包装常用组件
• 轻度包装常用工具使用
• 集成美团beeshell组件

初始化

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

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

/**
 *  初始化
 * @type {AntTool}
 */
//初始化 配置
const app = AntTool.Init({
    appId:"123",
    // isDebug为true时，可以打印日志，否则console禁用
    isDebug:true,
    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"

工具

扫码组件

请安装react-native-camera组件

如何使用

在android/app/build.gradle配置文件中，增加扫码组件配置

defaultConfig{  
      .....
      missingDimensionStrategy 'react-native-camera', 'general'
}

/**
 *   扫码组件
 */
export default class ScanTest extends React.Component{


    render(){
        return (
            <View style={{flex: 1,
                flexDirection: 'column',
                backgroundColor: 'black',}}>
                <MyScanView onBarCodeRead={(result=>{console.log(result)})}></MyScanView>
            </View>
        )
    }
}

授权配置

低版本android可以在AndroidManifest.xml文件中配置权限

使用时，请安装react-native-permissions组件

通用处理

可以调用RequestPermission方法进行授权

定义权限列表，注意区分android和ios权限，列表可以参考 这里

import {RequestPermission,CommonConfig} from 'ant-tool';

// 相机授权参考
const cameraPermission = Platform.select({
              android: CommonConfig.Permissions.android.CAMERA,
              ios: CommonConfig.Permissions.ios.CAMERA
});
RequestPermission(cameraPermission);

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

组件

MyPureComponent

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

如何引入

import MyPureComponent from 'ant-tool';

如何使用

class My extends MyPureComponent{

}

API

MyStatusBar

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

引入

import MyStatusBar from 'ant-tool';

属性

MyPinKeyboard

密码输入弹出框组件

如何引入

import MyPinKeyboard from 'ant-tool';

如何使用

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

属性

API