README
npm i --save react-native-view-shot 截屏和截UI图
npm i --save react-native-sqlite-storage 数据库操作
npm i --save react-native-fs 文件操作
npm i --save react-native-device-info 设备信息获取
npm i --save react-native-doc-viewer 打开文件
npm i --save jpush-react-native 极光推送
npm i --save react-native-update-js 热更新,自定义服务器
* react-native-update 发布热更新报错 将node_modules\react-native-update\local-cli\lib\bundle.js
* 的439行种的metro-bundler改成metro可成功运行！
* 报错版本0.52+(0.52以上版本报错)
npm i --save react-native-update 热更新
npm i --save react-native-image-marker 水印
npm i --save react-native-image-crop-picker 图片操作
npm i --save react-native-image-picker 视频操作
npm i --save react-native-picker 选择框组件
npm i --save react-native-spinkit 加载图
npm i --save react-native-talkingdata talkingdata统计组件
本库自带react-navigation(1.5.11)，若想使用最新版则按“选择安装依赖的初始化”初始化
npm i --save react-navigation 页面导航
npm i --save react-native-orientation 屏幕方向操作
* react-native-smart-barcode 二维码库中将react的PropTypes换成
* import PropTypes from 'prop-types';
* PropTypes已经从react中单独提取出来
* android 需要修改 RCTCapturePackage中的List的继承去掉
npm i --save react-native-smart-barcode 二维码扫描
npm i --save react-native-linear-gradient 渐变
npm i --save react-native-svg svg画图工具
npm i --save victory-native victory图表
npm i --save react-native-zip-archive 解压缩组件
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() {
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>
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
react-native-view-shot
import {CaptureImage} from "react-native-lib-cus-com";
CaptureImage.captureViewScreen();//截屏 截取UI的图片
react-native-sqlite-storage
import {DbMgr} from "react-native-lib-cus-com";
DbMgr.DB_TABLE_LIST = [];//创建表列表 此必须先调用
DbMgr.executeSql();//执行sql
还有很多方法，请查看文件里的注释
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包
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();//持续检查是否有更新
这些设置完后即可，提示会根据元信息的情况提示
react-native-fs
import {FileDirMgr} from "react-native-lib-cus-com";
FileDirMgr.copyDir();//复制目录到指定目录
FileDirMgr.readDir();//读取目录下的所有文件
FileDirMgr.deleteDirOrFile();//删除目录或文件
react-native-image-marker
import {IamgeWaterMark} from "react-native-lib-cus-com";
IamgeWaterMark.markText();//设置水印文本
react-native-image-zoom-viewer
import {ImageViewApi} from "react-native-lib-cus-com";
ImageViewApi.show();//显示大图
ImageViewApi.hide();//隐藏大图
jpush-react-native
本库未直接导出，若想使用，使用自行导出；
需要安装:
npm i --save jcore-react-native
npm i --save jpush-react-native
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();//读取批量数据
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
react-native-menu-action-cus
import {MenuBottomApi} from "react-native-lib-cus-com";
MenuBottomApi.show();//显示底部菜单
MenuBottomApi.hide();//隐藏底部菜单
react-native-picker
import {PickerCustome} from "react-native-lib-cus-com";
PickerCustome.pick();//选择框 底部
PickerCustome.pickMonth();//选择年月
react-native-spinkit
import {ProgressApi} from "react-native-lib-cus-com";
ProgressApi.show();//显示加载指示器
ProgressApi.hide();//隐藏菊花加载指示器
react-native-progress
import {ProgressPerApi} from "react-native-lib-cus-com";
ProgressPerApi.show();//显示进度条
ProgressPerApi.hide();//隐藏进度条
react-native-progress
import {ProgressBarApi} from "react-native-lib-cus-com";
ProgressBarApi.show();//显示进度条
ProgressBarApi.hide();//隐藏进度条
react-native-talkingdata
本库未直接导出，若想使用，使用自行导出；
需要安装:
npm i --save react-native-talkingdata
react-native-navigation-cus) 用于继承导航属性;这个组件中的方法都是"静态和动态"两种调用方式
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();//获取页面跳转传递的参数
react-native-video
import {VideoView} from "react-native-lib-cus-com";
react-native-datepicker
import {DatePicker} from "react-native-lib-cus-com";
react-native-dropdown-select
import {DropdownBox} from "react-native-lib-cus-com";
react-native-spinkit
import {Progress} from "react-native-lib-cus-com";
react-native-progress
import {ProgressPer} from "react-native-lib-cus-com";
react-native-image-zoom-viewer
import {ImageView} from "react-native-lib-cus-com";
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'}
react-native-side-menu
import {SlideMenuDrawer} from "react-native-lib-cus-com";
react-native-swipe-cus
import {SwiperImage} from "react-native-lib-cus-com";
react-native-swipe-cus
import {SwiperNotice} from "react-native-lib-cus-com";
react-native-img-browser
import {ImageBrower} from "react-native-lib-cus-com";
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图表 图形类型：柱状图，饼图，饼图；
Collaborators
@yehun