# rn-ui

**Repository Path**: wuye_666/rn-ui

## Basic Information

- **Project Name**: rn-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-08-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-native-ui

#### 项目介绍
react-native 基础ui

#### 软件架构
##### Constant：基础常量设置
##### Utils：工具类
##### fetch：fetch请求
##### Request：fetch请求基础封装
##### Loading：圆形加载
##### Toast：提示
##### Overlay：遮罩层
##### Text：文字
##### NetWorkView：网络加载view
##### Dialog：弹出框
##### Modal：modal层
##### RefreshFlatList：带下拉刷新和上拉加载的flatlist


#### 安装教程

##### yarn add react-native-animatable
##### yarn add react-native-root-siblings
##### yarn add https://gitee.com/ntsaas/react-native-ui.git

#### 使用说明
`import {
    Constant,
    Utils,
    fetch,
    Request,
    Loading,
    Toast,
    Overlay,
    Text,
    NetWorkView,
    Dialog,
    Modal,
    RefreshFlatList
} from 'react-native-ui';`
##### Constant
###### 1.代码：
`Constant.allowFontScaling //控制字体是否要根据系统的“字体大小”辅助选项来进行缩放`
`Constant.androidHeaderHeight //安卓头部高度，不包含状态栏，安卓的状态栏translucent属性设为true`
`Constant.androidBarHeight //安卓状态栏高度`
`Constant.iosHeaderHeight //ios头部高度，不包括iphoneX`
`Constant.iosBarHeight //ios状态栏高度，不包括iphoneX`
`Constant.iphoneXHeaderHeight //iphoneX头部高度`
`Constant.iphoneXBarHeight //iphoneX状态栏高度`
##### Utils
###### 1.代码：
`Utils.isIphoneX() //判断是否为iphoneX`
`Utils.isAndroid() //是否是安卓`
`Utils.isIos() //是否是ios`
`Utils.getHeaderHeight() //获取头部高度，包含状态栏高度`
`Utils.getBarHeight() //获取状态栏高度`
`Utils.getScreenWight() //获取屏幕宽度`
`Utils.getScreenHeight() //获取屏幕高度`
`Utils.getNowTime() //获取当前时间`
##### fetch
###### 1.代码：
    fetch(url,{method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(params),},tag)
    .then((response) => {
            if(response.ok){
                return response.json();
            }
        }).then((json) => {
           console.log(json);
        }).catch((err) => {
           console.log(err);
        }).done();
    fetch.abort(tag); //取消请求`
##### Request
###### 1.代码：
`Request.post(url,params,tag) //发送一个post请求，返回一个Promise`
`Request.get(url,params,tag) //发送一个get请求，返回一个Promise`
`Request.cancel(tag) //取消一个请求`
`Request.postWithLoading(url,params,timeout,tag,option) //带loading的post请求`
`Request.getWithLoading(url,params,timeout,tag,option) //带loading的get请求`
###### 2.Props:
*    url: 请求地址
*    params: 请求参数
*    tag：标志位，可直接传入this或者自定义的唯一值
*    timeout：请求超时时间
*    option:
        -    loadingMsg: 正在请求时loaing中的文字
        -    errMsg：请求失败显示的文字
        -    overTimeMsg：请求超时显示的文字
        -    loadingOption：loading的样式参数，详见[Loading](https://gitee.com/wuye_666/react-native-ui#loading)
##### Loading
###### 1.代码：
`Loading.show(option) //显示一个loading`
`Loading.hide() //关闭一个loading`
###### 2. option:
*    style: PropTypes.object,//加载层样式
*    loadingColor: PropTypes.string,//loading颜色,最后加载完成后的提示字体颜色会跟随
*    loadingSize: PropTypes.oneOf(['small', 'large']),//loading的大小
*    loadingText: PropTypes.string,//加载文字
*    textStyle: PropTypes.object,//加载文字样式
*    backHandler: PropType.bool, //安卓返回键是否可以取消，默认true
*    isCancel: PropType.bool, // 点击是否关闭，默认关闭
*    opacity: PropType.number, //最大透明度，默认0.6
*    backgroundColor: PropType.string,
*    onShow: PropType.func,//显示成功后的回调
*    onHidden: PropType.func,//关闭成功后的回调
##### Toast
###### 1.代码：
`Toast.show(option) //显示一个Toast`
`Toast.hide() //关闭一个Toast`
###### 2. option:
*    message: PropTypes.string, 显示的文字
*    onShow: PropTypes.func,//显示成功后的回调
*    onHidden: PropTypes.func, // 关闭成功后的回调
*    barStyle: PropTypes.oneOf(['default','light-content','dark-content']),
*    backgroundColor: PropTypes.string, //背景颜色
*    messageStyle: PropTypes.object,//文字样式
*    timeStyle: PropTypes.object,//时间样式
*    message: PropTypes.string.isRequired,//显示的文字
*    duration: PropTypes.number, //过几秒后关闭 为0时需要手动关闭
##### Overlay
###### 1.代码：
`Overlay.show(option) //显示一个Overlay`
`Overlay.hide() //关闭一个Overlay`
###### 2.option:
*    backHandler: PropType.bool, //安卓返回键是否可以取消，默认true
*    isCancel: PropType.bool, // 点击是否关闭，默认关闭
*    opacity: PropType.number, //最大透明度，默认0.6
*    backgroundColor: PropType.string,
*    onShow: PropType.func,//显示成功后的回调
*    onHidden: PropType.func,//关闭成功后的回调
##### Text
###### 1.代码：
 `<Text>这是一个text</Text>`
###### 2.Props: [同官方Text,只是统一设置了allowFontScaling](https://facebook.github.io/react-native/docs/text.html)
##### NetWorkView
###### 1.代码：
    <NetWorkView  url={'http://erp.sgsw.edu.cn:6000/Panto_MobileCampus'+MailListApi}
                              params={{obj:JSON.stringify({UserID:'admin'})}}
                              loadingType={'refresh'}
                              refreshColor={this.props.theme.color}
                              style={{backgroundColor:'#fafafa'}}
                              textStyle={{fontSize: 13 * this.props.pixelRatio.value}}
                              renderContent={(value)=> this.renderContent(value)}>
    </NetWorkView>
    renderContent(value){
        return(
            <View style={{flex:1,backgroundColor:'#ddd',justifyContent:'center',alignItems:'center'}}>
                <RNText style={{fontSize: 13 * this.props.pixelRatio.value}}>{value.RecordDetail[0].UserName}</RNText>
            </View>
        )
    }
###### 2.Props
*    url: PropTypes.string.isRequired,//请求url
*    params: PropTypes.object,//请求参数
*    style: PropTypes.object,//最外层样式
*    loadingType: PropTypes.oneOf(['loading','refresh']),//loading：页面中间转圈，refresh: 下拉刷新
*    loadingColor: PropTypes.string,//loading颜色,最后加载完成后的提示字体颜色会跟随
*    loadingSize: PropTypes.oneOf(['small', 'large']),//loading的大小
*    refreshColor: PropTypes.string,//下拉刷新控件颜色
*    refreshTitle: PropTypes.string,//下拉刷新控件标题，仅ios
*    renderContent: PropTypes.func.isRequired,//加载成功后的内容
*    timeout: PropTypes.number,//超时时间
*    loadingText: PropTypes.string,//加载时的显示文字
*    errorText: PropTypes.string,//加载出错后的显示文字
*    overTimeText: PropTypes.string,//超时后的显示文字
*    textStyle: PropTypes.object//加载文字样式
##### Dialog
###### 1.代码：
`Dialog.show(option) //显示一个Dialog`
`Dialog.hide() //关闭一个Dialog`
###### 2.option
*    style: PropTypes.object,//整体样式
*    title: PropTypes.string,//标题
*    headerStyle: PropTypes.object,//标题样式
*    buttons: PropTypes.array,//按钮
*    pressHide: PropTypes.bool,//按钮点击后是否关闭dialog,默认true
*    vertical: PropTypes.bool,//是否竖向排列button,默认否
*    overlayBackgroundColor: PropTypes.string,//遮罩层背景色
*    overlayOpacity: PropTypes.number,//遮罩层透明度 0-1
*    overlayAnimationIn: PropTypes.string,//遮罩层进入动画，默认淡入
*    overlayAnimationOut: PropTypes.string,//遮罩层退出通话，默认淡出
*    dialogAnimationIn: PropTypes.string,//dialog进入动画，默认放大
*    dialogAnimationOut: PropTypes.string,//dialog退出动画，默认缩小
*    duration: PropTypes.number,//动画持续时间，毫秒
*    backHandler: PropTypes.bool,//点击遮罩层是否退出，android中包含物理返回键，默认为true
*    onShow: PropTypes.func, //显示完成后的回调
*    onHidden: PropTypes.func, //关闭完成后的回调
*    onButtonPress: PropTypes.func,//按钮点击后的回调
##### Modal
###### 1.代码：
`Modal.show(option) //显示一个Modal`
`Modal.hide() //关闭一个Modal`
###### 2.option
*    top: PropTypes.bool, //是否从顶部出现，默认false
*    height: PropTypes.number,//modal的高度，默认当前屏幕的一半
*    overlayOpacity: PropTypes.number,//遮罩层的透明度
*    backgroundColor: PropTypes.string,//modal背景色，默认白色
*    duration: PropTypes.number,//动画持续时间，毫秒
*    backHandler: PropTypes.bool,//点击遮罩层是否退出，android中包含物理返回键，默认为true
*    onShow: PropTypes.func, //显示完成后的回调
*    onHidden: PropTypes.func, //关闭完成后的回调
##### RefreshFlatList
###### 1.代码：
    render(){
        return (
            <View style={styles.container}>
                <RefreshFlatList url={'http://erp.sgsw.edu.cn:6000/Panto_MobileCampus'+NoticeListApi}
                                     getPage={(page)=> this.getPage(page)}
                                     tidyData={(data)=> this.tidyData(data)}
                                     keyExtractor={(item,index)=> 'notice'+index}
                                     params={{
                                         obj: JSON.stringify(
                                             {
                                                 "UserID": 'Admin',
                                                 "PageIndex": this.state.page,
                                                 "PageSize": "15",
                                                 "Type": "2"
                                             }
                                         )
                                     }}
                                     pageSize={15}
                                     renderItem={(info)=> this.renderItem(info)}
                />
            </View>
        );
    }

    getPage(page){
        this.setState({page: page});
    }

    tidyData(data){
        return data.RecordDetail[0];
    }

    renderItem({item,index}){
        return (
            <Text style={{height: Utils.getScreenHeight()/15,borderBottomColor:'#ddd',
                            borderBottomWidth:0.5,backgroundColor:'#fff',
                            alignItems:'center',justifyContent:'center'}}>{item.Name}</Text>
        );
    }
###### 2.Props:
*    url: PropTypes.string, //请求地址
*    params: PropTypes.object,//请求参数
*    method: PropTypes.oneOf(['post','get']),//请求方式
*    timeout: PropTypes.number,
*    pageSize: PropTypes.number,//每页行数，默认15
*    renderItem: PropTypes.func,//每行组件
*    getPage: PropTypes.func,//获取下一页的页数
*    tidyData: PropTypes.func,//整理数据，返回整理后的数据
*    listRef: PropTypes.func,//list的ref
*    footerContainerStyle: View.propTypes.style,//footer组件的样式
*    footerTextStyle: View.propTypes.style,//底部组件text的样式
*    footerRefreshingText: PropTypes.string,//加载更多的文字
*    footerFailureText: PropTypes.string,//加载失败的文字
*    footerNoMoreDataText: PropTypes.string,//没有更多数据的文字
*    footerEmptyDataText: PropTypes.string,//空数据的文字
*    footerOverTimeText: PropTypes.string,//超时文字