❤
npm
Sign UpSign In

zjzj

0.0.3 • Public • Published

小蚂蚁工具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
//美团组件
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 隐藏密码框

Readme

Keywords

Package Sidebar

Install

npm i zjzj

Weekly Downloads

1

Version

0.0.3

License

ISC

Unpacked Size

55.1 kB

Total Files

23

Last publish

Collaborators

  • zhoujiangzi
Try on RunKit
Report malware