react-native 自定义辅助组件库，完美适配各种机型和屏幕大小；完美的网路请求，带加载条，可上传、下载文件,支持视频播放，二维码条形码扫描，图片选择、剪辑、查看大图，本地存储，数据库操作，页面导航，截屏和截UI图，水印图片，打开office类文件;等等多种ui,可自定义删除;可节省应用级软件的开发时间
完美的页面导航跳转返回；每一个Tab页面组都有自己的返回逻辑，互不影响；杜绝了传统的记住历史页面进行的返回; 避免从一个Tab页面组跳入到另一个Tab页面组，返回时返回到跳入之前的Tab页面组；

具体使用请看下边的组件BaseComponent

安装组件：

npm i --save react-native-lib-cus-com

注意：

1.所有源码中的方法有注释，可自行查看；
2.各组件的详细调用方法，可进入相应的组件文件查看，里面所有的方法/函数都有注释；
3.以下“使用”的说明只有简单的说明(且都不写参数，直接复制使用，可能会报错)，具体说明，请参照“注意”第2点

安装依赖,选择安装（别忘了根据相应库进行react-native link ...）

“可选依赖”的初始化 (看下列例子)

import {ComponentConstructor} from "react-native-lib-cus-com";

ComponentConstructor({
react_native_root_toast:require("react-native-root-toast"),
react_native_fs:require("react-native-fs")
});

//就是将组件名中的"-"换成"_",传入ComponentConstructor（组件构造器）即可。

使用api (方法参数，进入源文件查看，里面详细注解)：

StyleSheetAdapt 样式表创建，适配各种机型、各种屏幕与StyleSheet用法一致 react-native-stylesheet-adapt

StyleSheetAdapt.create();//创建样式表单
StyleSheetAdapt.getStyle();//得到样式属性的json对象
StyleSheetAdapt.designSize = {width:768,height:1024};// 设置页面设计大小 可不设置 默认设计大小12寸平板电脑（{width:768,height:1024}）

//数字后面可加以下字符 若加字符，加数字后面
//'dw' 获取相对当前屏幕的设计宽比的宽
//'w' 获取相对当前屏幕宽的宽
//'n' 不进行屏幕比缩放
//'dh' 获取相对当前屏幕的设计高比的宽
//'h' 获取相对当前屏幕高比的宽
//如：
const styles = StyleSheetAdapt.create({
    testStyle2:{
        width:'0.1w',//屏幕宽的10分之1
        height:'0.1h',//屏幕高的10分之1
    },
    testStyle3:{
            width:'100dw',//按设计大小宽比适配 会随屏幕调整布局
            height:'100dw',//按设计大小宽比适配
        },
    testStyle:{
        transform:[
            {rotateX:'180deg'}
        ],
    },
});//创建样式表单

import {StyleSheetAdapt} from "react-native-lib-cus-com";
import React, {Component} from 'react';
import {View} from 'react-native';

/**
设置页面设计大小（只需设置一次） 可不设置
默认设计大小12寸平板电脑（{width:768,height:1024}）
**/
StyleSheetAdapt.designSize = {width:768,height:1024};
const styles = StyleSheetAdapt.create({

    testStyle2:{
        width:100,
        height:200,
    },
    testStyle:{
        transform:[
            {rotateX:'180deg'}
        ],
    },
});//创建样式表单
//StyleSheetAdapt.styleJsonAdaptConvert();//样式属性json中的值适配

export default class Test extends BaseComponent<Props> {

    constructor(props) {
        super(props);

    }

    alert(){
        //与react-native 中的Alert用法一致
        Alert.alert();
    }

    componentWillMount(){

    }

    componentDidMount() {
    }




    render() {

        const {resultEstimateData,noticesData,resultFinishProgress,
            tripListData,customerObj,isNews,pictures,path,dataSize,picture} = this.state;

        return (
             <ViewTitle>
                            <View style={styles.testStyle}></View>
                            <View style={StyleSheetAdapt.testStyle2}></View>
                            <View style={StyleSheetAdapt.styleJsonAdaptConvert({
                                width:100,
                                height:200,
                            })}></View>
                        </ViewTitle>
        );
    }
}

Http(react-native-http-cus) 网路请求(文件上传下载，基于react-native-fs)

import {Http} from "react-native-lib-cus-com";
Http.post();//基于 fetch 封装的 POST请求
Http.get();//基于 fetch 封装的 Get请求
Http.requestAjax();//基于 ajax 封装的 网络请求
Http.urlFile = "";//上传文件 接口
Http.fileField = "";//文件上传包含文件的字段，可不传
Http.upLoadFileToService();//上传文件 react-native-fs
Http.downloadFile();//下载文件 react-native-fs

Tools 工具类，提供各种功能

import {Tools} from "react-native-lib-cus-com";
Tools.getStyle();//得到样式属性的json对象
Tools.replaceStr();//替换指定位置的字符串 字符串替换处理操作
Tools.getLocation();//获取地理位置
Tools.toast();//toast消息提示
Tools.openDoc();//打开文档(文件)
Tools.pickMonth();//选择年月（弹出年月ui选择框）
Tools.timeFormatConvert();//时间格式转化
Tools.isNumber();//判断是否是数字
Tools.getTimeByRank();//获取本周周一和周日的时间戳 对象；获取本月的月初的时间戳和月底的时间戳 对象
Tools.getDistanceByGps();//计算两点经纬度的距离
Tools.captureViewScreen();//截屏 截取UI的图片
Tools.toSpecifiedPageInPush = (result)=>{};//打开推送回调函数（如：跳转入指定页面）;直接赋值方法

Alert对话框可支持显示图片，gif,视频（MP4）

import {Alert} from "react-native-lib-cus-com";
Alert.alert();//显示对话框
Alert.hide();//关闭对话框

CaptureImage 截屏或截UI图基于react-native-view-shot

import {CaptureImage} from "react-native-lib-cus-com";
CaptureImage.captureViewScreen();//截屏 截取UI的图片

DbMgr 数据库操作基于数据库操作react-native-sqlite-storage

import {DbMgr} from "react-native-lib-cus-com";
DbMgr.DB_TABLE_LIST = [];//创建表列表 此必须先调用
DbMgr.executeSql();//执行sql
还有很多方法，请查看文件里的注释

HotUpdateCus 热更新，提供热更新各种方法,自己配置服务器基于react-native-update-js


/**
 * HotUpdateCus 热更新，提供热更新各种方法
 * metaInfo(元信息)：{
updateList:[],//更新appID集合（appID集合）//不传字段，则所有app将收到更新信息，传了空数组则所有app不会收到更新信息
              //如：updateList：[12,123,"vb"];
updateNoList:[],//不更新appID集合（appID集合）//updateNoList中含的appID的app将不会收到更新信息;不传或传空数组则所有app更新
                 //如：updateNoList：[12,123,"vb"];
code:777,//777、立刻更新；888、立刻强制更新；999、立刻静默更新
reboot:555,//666、强制使用更新；555、用户决定是否使用更新;333、下次启用更新 默认是555
finishInfo:'',//更新完成时的提示信息reboot=333时有效
}
 如：{"updateList":[]}
 * **/

import {HotUpdateCus} from "react-native-lib-cus-com";
HotUpdateCus.host = null;//热更新配置文件地址或接口，//get请求
HotUpdateCus.tag = null;//热更新的标志 与后台配置一致
HotUpdateCus.appID = null;//给每个app的唯一标识,可以是任何数据，必须传入，用于判断是否需要更新，与updateList、updateNoList配套使用
                          //如：HotUpdateCus.appID = 12
HotUpdateCus.updateFirst = true;//app第一次启动是否强制更新，默认true更新

HotUpdateCus.update.execute = true;//是否启动检查更新
HotUpdateCus.checkUpdate();//检查是否有更新（检查一次）
HotUpdateCus.checkUpdateLoop();//持续检查是否有更新

后台json配置：
{
            "ios-lx_yyt-2.0.7":{//这key是这样设置,ios："ios-" + HotUpdate.tag + "-" + packageVersion = "lx_yyt-2.0.7";android："android-" + HotUpdate.tag + "-" + packageVersion = "lx_yyt-2.0.7";
                "tag":"lx_yyt",//app设置的标识 ，HotUpdate.tag="lx_yyt"设置的一致
                "packageVersion":"2.0.7",//app的静态版本(硬版本)号，即编译时设置的版本号，此发生变化就会去下载新的静态版本(硬版本)
                "downloadUrl":"https://itunes.apple.com/cn/app/id1438062830?l=en&mt=8",//静态版本(硬版本)下载地址
                "description":"yyy",//静态版本(硬版本)描述
                "metaInfoPkg":{//元信息可在里面自定义一些数据,app的静态版本(硬版本)，更新时回传
                    "rnUpdate":true//此字段是我测试项目自定义的，是否开启react-native-update热更新，默认false关闭，使用自定义热更新；true开启，使用react-native-update热更新，只能选择一种
                },
                "publishJS":[//发布的js所有版本,默认第一个是最新发布的的js版本,可任选一个更新
                    {
                        "description": "asdfsa",//js描述
                        "version": "2.0.140",//js的版本号
                        "metaInfo":{//元信息可在里面自定义一些数据，js的版本，更新时回传
                        },
                        "build": 12,// 构建值（数字），只可增大，不可重复，用于比对版本是否升级
                        "updateUrl": "http://yyt.yyy.com:8081/app_config/lx_yyt_app.zip" //js包
                    }
                ]

        }
}

HotUpdate 热更新，提供热更新各种方法基于react-native-update

安装、配置好react-native-update后

/**
 发布热更新报错 将node_modules\react-native-update\local-cli\lib\bundle.js
 的439行种的metro-bundler改成metro可成功运行！
 报错版本0.52+(0.52以上版本报错)
 **/


/**
 * HotUpdate 热更新，提供热更新各种方法
 * metaInfo(元信息)：{
updateList:[],//更新appID集合（appID集合）//不传字段，则所有app将收到更新信息，传了空数组则所有app不会收到更新信息
updateNoList:[],//不更新appID集合（appID集合）//updateNoList中含的appID的app将不会收到更新信息;不传或传空数组则所有app更新
code:777,//777、立刻更新；888、立刻强制更新；999、立刻静默更新
reboot:555,//666、强制使用更新；555、用户决定是否使用更新;333、下次启用更新 默认是555
finishInfo:'',//更新完成时的提示信息reboot=333时有效
}
 发布时，因react-native-update只接受字符串，所以元信息应是json的字符串，
 如：{"updateList":[]}
 * **/
import {HotUpdate} from "react-native-lib-cus-com";

/**
appkey 可采用以下方式获取：
import _updateConfig from '项目名/update';
const {appKey} = _updateConfig[Platform.OS];
**/
HotUpdate.appKey = null;//react-native-update的key
HotUpdate.appID = null;//给每个app的唯一标识,可以是任何数据，必须传入，用于判断是否需要更新，与updateList、updateNoList配套使用
HotUpdate.updateFirst = true;//app第一次启动是否强制更新，默认true更新

HotUpdate.update.execute = true;//是否启动检查更新
HotUpdate.checkUpdate();//检查是否有更新 （检查一次）
HotUpdate.checkUpdateLoop();//持续检查是否有更新

这些设置完后即可，提示会根据元信息的情况提示

FileDirMgr 可复制文件目录到指定目录，读取文件目下所有文件及文件目录，可删除文件和文件目录基于react-native-fs

import {FileDirMgr} from "react-native-lib-cus-com";
FileDirMgr.copyDir();//复制目录到指定目录
FileDirMgr.readDir();//读取目录下的所有文件
FileDirMgr.deleteDirOrFile();//删除目录或文件

IamgeWaterMark 设置图片水印基于react-native-image-marker

import {IamgeWaterMark} from "react-native-lib-cus-com";
IamgeWaterMark.markText();//设置水印文本

ImageViewApi 查看大图基于react-native-image-zoom-viewer

import {ImageViewApi} from "react-native-lib-cus-com";

ImageViewApi.show();//显示大图
ImageViewApi.hide();//隐藏大图

JPush 极光推送类，提供极光推送的各种方法可看JPush文件源码注释 jpush-react-native

本库未直接导出，若想使用，使用自行导出；
需要安装:
npm i --save jcore-react-native
npm i --save jpush-react-native

LocalStorage 持久化本地存储基于react-native-storage

import {LocalStorage} from "react-native-lib-cus-com";
LocalStorage.save();//使用key来保存单个数据（key-only）。这些数据一般是全局独有的，需要谨慎单独处理的数据
LocalStorage.get();//读取单个数据
LocalStorage.saves();//使用key来保存批量数据（key-only）。这些数据一般是全局独有的，需要谨慎单独处理的数据
LocalStorage.gets();//读取批量数据

Media 媒体类，处理摄像头使用和相册的使用相册文件操作基于react-native-image-crop-picker和react-native-image-picker

import {Media} from "react-native-lib-cus-com";
Media.pickImage();//选择图片 react-native-image-crop-picker
Media.takeImage();//拍照 react-native-image-crop-picker
Media.pickVideo();//选择视频 react-native-image-crop-picker
Media.takeVideo();//拍摄视频 react-native-image-picker

import {MenuBottomApi} from "react-native-lib-cus-com";
MenuBottomApi.show();//显示底部菜单
MenuBottomApi.hide();//隐藏底部菜单

PickerCustome 自定义滑动选择基于react-native-picker

import {PickerCustome} from "react-native-lib-cus-com";
PickerCustome.pick();//选择框 底部
PickerCustome.pickMonth();//选择年月

ProgressApi 加载指示器（加载条）基于react-native-spinkit

import {ProgressApi} from "react-native-lib-cus-com";
ProgressApi.show();//显示加载指示器
ProgressApi.hide();//隐藏菊花加载指示器

ProgressPerApi 显示进度的进度条 react-native-progress

import {ProgressPerApi} from "react-native-lib-cus-com";
ProgressPerApi.show();//显示进度条
ProgressPerApi.hide();//隐藏进度条

ProgressBarApi 显示条形进度的进度条 react-native-progress

import {ProgressBarApi} from "react-native-lib-cus-com";
ProgressBarApi.show();//显示进度条
ProgressBarApi.hide();//隐藏进度条

TalkingData 使用talkingdata app统计分析可看TalkingData源文件注释 react-native-talkingdata

本库未直接导出，若想使用，使用自行导出；
需要安装:
npm i --save react-native-talkingdata

Theme 主题集合颜色、宽度，及一些默认配置

import {Theme} from "react-native-lib-cus-com";
主题配色，宽高，弧度，在这个库中的一些ui使用到这里的默认配置，特别是样式

使用UI (ui属性，可调用方法参数，进入源文件自行查看，里面详细注解)：

this.goPage();//跳转页面
BaseComponent.goPage();//跳转页面
this.goBack();//返回已进入的页面
BaseComponent.goBack();//返回已进入的页面
this.setParams();//设置参数改变导航栏
BaseComponent.setParams();//设置参数改变导航栏
this.getPageParams();//获取页面跳转传递的参数
BaseComponent.getPageParams();//获取页面跳转传递的参数

 /**
     * 导航栏按钮设置
     * headerLeft：//导航栏左边按钮可传 bool（false:隐藏左边默认UI;true:显示左边默认UI）、图片(url)、UI
     * headerRight：//导航栏右边按钮可传 bool（false:隐藏左边默认UI;true:显示左边默认UI）、图片(url)、UI
     * headerLeftHandle://函数方法 可在左边按钮点击返回之前执行
     * headerRightHandle://函数方法 右边按钮点击执行
     * **/ 
 //还有很多react-navigation支持的参数都可通过此方法传递
this.setParams({
  headerLeft:function() {},//导航栏左边按钮可传 bool（false:隐藏左边默认UI;true:显示左边默认UI）、图片(url)、UI
  headerRight:function (){},//导航栏右边按钮可传 bool（false:隐藏左边默认UI;true:显示左边默认UI）、图片(url)、UI
  headerLeftHandle:function(){},//函数方法 可在左边按钮点击返回之前执行
  headerRightHandle:function() {}//函数方法 右边按钮点击执行
});//设置参数改变导航栏

//继承BaseComponent,将有两个生命周期回调方法
/**
* 进入页面时回调此方法
* @param params json,//第一个参数，页面传递参数
* @param action object,第二个参数，页面传递动作
* @param routeName string,第三个参数，页面名
* **/
componentWillEnter(params,action,routeName);//进入页面时回调此方法
componentWillExit();//退出页面时回调此方法

import React, {Component} from 'react';
import {
   Text,
} from 'react-native'
import {
    StyleSheetAdapt,
    ViewTitle,
    BaseComponent,
    BarcodeView,
    Tools,
} from "react-native-lib-cus-com";
export default class Test extends BaseComponent<Props> {

    constructor(props) {
        super(props);
          let param = Tools.userConfig.userCutAccount && Tools.userConfig.userCutAccount.length > 0
            ? {
                headerLeft:<ImageChange icon={require("images/role.png")}
                                        onPressIn={()=>PageSearchRole.show(this)}
                                        style={styles.hLeft}/>
            }
            : {
                headerLeft:false
            };

        this.setParams(param);
    }
    
    /**
        * 进入页面时回调此方法
        * @param params json,//第一个参数，页面传递参数
        * @param action object,第二个参数，页面传递动作
        * @param routeName string,第三个参数，页面名
        * **/
        componentWillEnter(params,action,routeName){
            
        }//进入页面时回调此方法
        componentWillExit(){
            
        }//退出页面时回调此方法
    
    render() {
        return (
            <ViewTitle>
                <BarcodeView ref={c=>this.barcodeView}
                    style={styles.testStyle}/>
                <Text onPress={()=>this.barcodeView.startScan()}>
                    开始扫码
                </Text>
            </ViewTitle>
        );
    }
}
const styles = StyleSheetAdapt.create({

    testStyle2:{
        width:100,
        height:200,
    },
    testStyle:{
        transform:[
            {rotateX:'180deg'}
        ],
    },
});

BaseComponent.setScreenOrientations();//设置屏幕 静态
this.setScreenOrientations();//设置屏幕 动态
BaseComponent.getOrientation();//获取屏幕方向 静态
this.getOrientation();//获取屏幕方向 动态
BaseComponent.addOrientationListener();//监听屏幕方向变化
this.goPage();//跳转页面
this.goBack();//返回已进入的页面
this.setParams();//设置参数改变导航栏
this.getPageParams();//获取页面跳转传递的参数

ViewTitle 视频播放组件 ui控件导航框控件头部有导航栏（可设置有无）左边带返回按钮（可设置有无）中间有title文本（可设置有无）右边带菜单按钮（可设置有无）底部带按钮（可设置有无）可设置是否可滚动一般用于作为页面的基础框View

import {ViewTitle} from "react-native-lib-cus-com";

VideoView 视频播放组件 ui控件 react-native-video

import {VideoView} from "react-native-lib-cus-com";

import {VideoList} from "react-native-lib-cus-com";

WebViewCus 浏览器（可设置成弹框出现，也可与页面合并兼容）的组件 ui控件（WebView）支持html和uri（网页地址），并自动适配页面大小

import {WebViewCus} from "react-native-lib-cus-com";

DatePicker 日期选择组件 react-native-datepicker

import {DatePicker} from "react-native-lib-cus-com";

ButtonTime 时间选择按钮控件可选择时间显示并回传时间（基于DatePicker封装）

import {ButtonTime} from "react-native-lib-cus-com";

ViewCtrl View的升级版增加左右滑动事件

import {ViewCtrl} from "react-native-lib-cus-com";

import {DropdownBox} from "react-native-lib-cus-com";

PickDropdown 下拉框有下拉图表等，更加符合应用场景（基于DropdownBox）

import {PickDropdown} from "react-native-lib-cus-com";

PickDropdownMonth 月份下拉框（基于PickDropdown）

import {PickDropdownMonth} from "react-native-lib-cus-com";

Progress 进度加载条 react-native-spinkit

import {Progress} from "react-native-lib-cus-com";

ProgressPer 进度条显示进度 react-native-progress

import {ProgressPer} from "react-native-lib-cus-com";

Question 答题ui，支持单选、多选、问答；主要应用场景是调查问卷累等等

import {Question} from "react-native-lib-cus-com";

QuestionList 答题集合（列表）ui （基于Question）

import {QuestionList} from "react-native-lib-cus-com";

FlatListView 列表加载，可上下拉、分页、懒加载UI,有加载提示动画和提示信息（加载更多）

import {FlatListView} from "react-native-lib-cus-com";

ImageBg 背景图组件

底图就是这个组件

import {ImageBg} from "react-native-lib-cus-com";

ButtonChange 点击按钮

import {ButtonChange} from "react-native-lib-cus-com";

ImageView 查看大图基于react-native-image-zoom-viewer

import {ImageView} from "react-native-lib-cus-com";

ImageList 可以查看图片，成行排列，每张图片下部可以有提示文字，可水平滚动，可垂直滚动，可自动换行（rowCount），默认水平滚动（基于ImageView）

import {ImageList} from "react-native-lib-cus-com";

BarcodeView 二维码及条形码扫描组件基于react-native-smart-barcode

import React, {Component} from 'react';
import {
   Text,
} from 'react-native'
import {
    StyleSheetAdapt,
    ViewTitle,
    BaseComponent,
    BarcodeView,
} from "react-native-lib-cus-com";

type Props = {};
export default class Test extends BaseComponent<Props> {

    constructor(props) {
        super(props);

    }
    render() {
        return (
            <ViewTitle>
                <BarcodeView ref={c=>this.barcodeView}
                    style={styles.testStyle}/>
                <Text onPress={()=>this.barcodeView.startScan()}>
                    开始扫码
                </Text>
            </ViewTitle>
        );
    }
}
const styles = StyleSheetAdapt.create({

    testStyle2:{
        width:100,
        height:200,
    },
    testStyle:{
        transform:[
            {rotateX:'180deg'}
        ],
    },
});

MenuBottom 底部菜单ui (ui效果，与组件MenuBottomApi一样)

import {MenuBottom} from "react-native-lib-cus-com";
<MenuBottom ref={c=>this.menuBottom=c}
btnList={["btn1","btn2"]}
onPress={item=>{}}
/>
this.menuBottom.show(true);

import {SlideMenuDrawer} from "react-native-lib-cus-com";

SwiperImage 图片轮播图基于react-native-swipe-cus

import {SwiperImage} from "react-native-lib-cus-com";

SwiperNotice 公告轮播图片和一些文本信息 react-native-swipe-cus

import {SwiperNotice} from "react-native-lib-cus-com";

TextChange 按钮可使用API改变文本

import {TextChange} from "react-native-lib-cus-com";

TextDoubleIcon 双文本并且右边有个图标控件

import {TextDoubleIcon} from "react-native-lib-cus-com";

TextInputIcon 左边带图标的输入框控件

import {TextInputIcon} from "react-native-lib-cus-com";

TextInputLabel 带文字label 的输入框的输入框控件

import {TextInputLabel} from "react-native-lib-cus-com";

TextIcon 左边带图标的文本控件

import {TextIcon} from "react-native-lib-cus-com";

TextIconBg 圆进程,可以放底图中间可放进度百分比、其他文本、控件

import {TextIconBg} from "react-native-lib-cus-com";

TitleRow 左边具有按钮logo的UI 右边具有按钮中间具有按钮UI控件

import {TitleRow} from "react-native-lib-cus-com";

TitleBlock 左边具有竖杠中间上部具有大文本(支持UI)，紧挨着右边具有较小本(支持UI)，大文本下边有小文本(支持UI)

import {TitleBlock} from "react-native-lib-cus-com";

TitleBlockList TitleBlock的列表

import {TitleBlockList} from "react-native-lib-cus-com";

ModalTextInput 弹出输入内容框，如反馈评价等；（有一个评分输入，和一个评语输入）

import {ModalTextInput} from "react-native-lib-cus-com";

ModalTextInputS 弹出输入内容框，如反馈评价等；（一个评语输入）（ui效果与ModalTextInput一样）

import {ModalTextInputS} from "react-native-lib-cus-com";

ScrollSelectOptions 行选择，默认垂直(或水平)显示选项选择,(单选或多选)

import {ScrollSelectOptions} from "react-native-lib-cus-com";

ItemRowTitle 左边具有标题的提示的UI 右边具有标识或UI的 UI控件

import {ItemRowTitle} from "react-native-lib-cus-com";

ScrollViewRowList 分组的带图片的ui 上部有title的文本，下边是主体有图片，图片下边有文本支持一行多个或竖直多个

import {ScrollViewRowList} from "react-native-lib-cus-com";

ItemRowSwitch 具有ItemRowTitle提示的下拉展示控件框直接封装有打开文件

import {ItemRowSwitch} from "react-native-lib-cus-com";

ItemRowTableSwitch 具有ItemRowTitle提示的下拉展示控件框

import {ItemRowTableSwitch} from "react-native-lib-cus-com";

ImageBrower 图片浏览UI，可以多个图片缩略图和大图皆支持基于react-native-img-browser

import {ImageBrower} from "react-native-lib-cus-com";

CheckBox 选择框此库里只有本人写的源码，还未测试导出，有意者可自行修改导出

Charts 图表

<Charts.BarHorizontal />

<Charts.BarHorizontal2 /> <Charts.BarHorizontal3 /> <Charts.BarCircleChart />

<Charts.BarCharts />

<Charts.Chart /> 基于react-native-echarts-cus

import {Charts} from "react-native-lib-cus-com";
<Charts.BarHorizontal /> //水平渐变柱状图 双层颜色变化 无文字
<Charts.BarHorizontal2 /> //水平渐变柱状图2 左右有文字提示 中间相对比变化的进度对比条
<Charts.BarHorizontal3 /> //水平渐变柱状图3 可有多条BarHorizontal2
<Charts.BarCircleGradient /> //圆形渐变图
<Charts.BarCircleChart /> //圆形加载图 4圆 中间有显示文本（Native实现）
<Charts.BarCharts /> //柱状图（Native实现）

<Charts.Chart /> //echarts图表 图形类型：柱状图，饼图，饼图；

ImageViewWatermark 固定图片水印模版UI 水印在左下角

import {ImageViewWatermark} from "react-native-lib-cus-com";
ImageViewWatermark.show();//显示图片，有参数
或
<ImageViewWatermark ref={c=>this.waterMark=c} />
this.waterMark.show();//显示图片，有参数

GuideImageHint 任务头部水平提示导航栏

import {GuideImageHint} from "react-native-lib-cus-com";

ItemRowBuyCar 购物车行元素UI,右，有勾选框、图片、文本、数量输入UI；

import {ItemRowBuyCar} from "react-native-lib-cus-com";

ItemRowGoods 商品行组件水平行，从左到右内容分别是，左边一张图片，中间有可支持5行竖直的文本行，其次是商品价格最右边一个按钮（如加入购物车）

import {ItemRowGoods} from "react-native-lib-cus-com";

ItemRowGoodsPromotion 促销活动Item；一张图片，图片左下角和右下角分别有一个按钮

import {ItemRowGoodsPromotion} from "react-native-lib-cus-com";

ItemRowGuideApplyType 行选择组件，分成两部分，左边支持文本和选择框，右边是文本

import {ItemRowGuideApplyType} from "react-native-lib-cus-com";

ItemRowTripApply 出差样式UI，左边文本提示文字，右边可以是：下拉框，输入框，文本

import {ItemRowTripApply} from "react-native-lib-cus-com";

ItemRowGuideTripApply 行单元格，一行内可支持1到7个单元格，可组合成表格。

import {ItemRowGuideTripApply} from "react-native-lib-cus-com";

ItemRowTripTask 行组件，上部是左边是title，右边是状态；像QQ一样单行可以侧滑，侧滑显示按钮

import {ItemRowTripTask} from "react-native-lib-cus-com";

ItemRowReciew 多个ui平分一行水平

import {ItemRowReciew} from "react-native-lib-cus-com";

BarHorizontalTitleSection 条形进度块，上部有对比条提示，左边有对比的title，主体是对比条若干

import {BarHorizontalTitleSection} from "react-native-lib-cus-com";

ChartCircleProgress 4圆进度显示Chart 中间提示进度数据最外层时间进度，跨度1月最小单位；天 (主页业绩进度例子，左边圆圈进度)

import {ChartCircleProgress} from "react-native-lib-cus-com";

ChartCircleProgressList 是ChartCircleProgress列表有title （基于 ChartCircleProgress）

import {ChartCircleProgressList} from "react-native-lib-cus-com";

ResultProgressBlock 业务进度块类似于进度对比表，有显示的基本内容，还有条状的对比图

import {ResultProgressBlock} from "react-native-lib-cus-com";

SearchDDDIpt 搜索组件四个下拉框一个输入框一个搜索按钮

import {SearchDDDIpt} from "react-native-lib-cus-com";

SearchDropIpt 搜索组件四个下拉框一个输入框一个搜索按钮

import {SearchDropIpt} from "react-native-lib-cus-com";

SearchIpt 具有输入框(或下拉框)--按钮的搜索条件的UI

import {SearchIpt} from "react-native-lib-cus-com";

TitleBlockTarget 目标幕模块上部有header文本中间有TitleBlockList 下边有TitleBlock文本提示(下左)和BarHorizontalTitleSection（对比进程下右）

import {TitleBlockTarget} from "react-native-lib-cus-com";

TitleBlockTargetArea 区域模块上部有header文本中间有ResultProgressBlock（业绩进度模块）下边有TitleBlock文本提示(下左)和BarHorizontalTitleSection（对比进程下右）

import {TitleBlockTargetArea} from "react-native-lib-cus-com";

欢迎交流

欢迎提问交流；若有bug，请添加bug截图或代码片段，以便更快更好的解决问题。
欢迎大家一起交流

我的博客

Keywords

react-native

lib-cus-com

react-native-lib-cus-com

react-native组件库

截屏和截UI图

适配屏幕

FAQs

What is react-native-lib-cus-com?

Is react-native-lib-cus-com popular?

Is react-native-lib-cus-com well maintained?

Package last updated on 23 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

react-native-lib-cus-com