第4.7章：Rn公共css样式整理

/** 公共样式表 **/
import {Platform, StatusBar, StyleSheet} from 'react-native';
import Resolution from "../utils/Resolution";
const IS_IOS = Platform.OS === 'ios';

export default StyleSheet.create({

    /** color **/
    // 常用颜色
    red: {color:'#FF0000'},
    orange: {color:'#FFA500'},
    yellow: {color:'#FFFF00'},
    green: {color:'#00FF00'},
    cyan: {color:'#00FFFF'},
    blue: {color:'#0000FF'},
    purple: {color:'#800080'},
    black: {color:'#000'},
    white: {color:'#FFF'},
    gray: {color:'#808080'},
    darkGray: {color:'#A9A9A9'},
    lightGray: {color:'#D3D3D3'},
    tomato: {color:'#FF6347'},
    PeachPuff: {color:'#FFDAB9'},

    /** 主题色 **/
    themeColor: {color:'#e74c3c'},
    // 默认灰色字体颜色
    textGrayColor: {color:'#989898'},
    // 默认黑色字体颜色
    textBlockColor: {color:'#262626'},
    // 默认背景颜色
    bgColor: {color:'#E6E6E6'},
    // 默认分割线颜色
    lineColor: {color:'#E6E6E6'},
    // 默认placeholder颜色
    placeholderColor: {color:'#eee'},
    // borderColor
    borderColor: {color:'#808080'},
    // 导航title 颜色
    navTitleColor: {color:'#262626'},
    // 导航左item title color
    navLeftTitleColor: {color:'#333'},
    // 导航右item title color
    navRightTitleColor: {color:'#333'},
    navThemeColor: {color:'#FEFEFE'},
    iconGray: {color:'#989898'},
    iconBlack: {color:'#262626'},

    /** space **/
    // 上边距
    mt10:{marginTop: 10},
    mt20:{marginTop: 20},
    mt30:{marginTop: 30},
    mt40:{marginTop: 40},
    mt50:{marginTop: 50},
    mt60:{marginTop: 60},
    mt70:{marginTop: 70},
    mt80:{marginTop: 80},
    mt100:{marginTop: 100},

    // 左边距
    ml10:{marginLeft: 10},
    ml20:{marginLeft: 20},
    ml30:{marginLeft: 30},
    ml40:{marginLeft: 40},
    ml50:{marginLeft: 50},
    ml60:{marginLeft: 60},
    ml80:{marginLeft: 80},
    ml100:{marginLeft: 100},

    // 下边距
    mb10:{marginBottom: 10},
    mb20:{marginBottom: 20},
    mb30:{marginBottom: 30},
    mb40:{marginBottom: 40},
    mb50:{marginBottom: 50},
    mb60:{marginBottom: 60},
    mb80:{marginBottom: 80},
    mb100:{marginBottom: 100},

    // 右边距
    mr10:{marginRight: 10},
    mr20:{marginRight: 20},
    mr30:{marginRight: 30},
    mr40:{marginRight: 40},
    mr50:{marginRight: 50},
    mr60:{marginRight: 60},
    mr80:{marginRight: 80},
    mr100:{marginRight: 100},

    // 上边距
    pt5:{paddingTop: 5},
    pt10:{paddingTop: 10},
    pt20:{paddingTop: 20},
    pt30:{paddingTop: 30},
    pt40:{paddingTop: 40},
    pt50:{paddingTop: 50},
    pt60:{paddingTop: 60},
    pt80:{paddingTop: 80},
    pt100:{paddingTop: 100},

// 左边距
    pl10:{paddingLeft: 10},
    pl15:{paddingLeft: 15},
    pl20:{paddingLeft: 20},
    pl30:{paddingLeft: 30},
    pl40:{paddingLeft: 40},
    pl50:{paddingLeft: 50},
    pl60:{paddingLeft: 60},
    pl80:{paddingLeft: 80},
    pl100:{paddingLeft: 100},

// 下边距
    pb10:{paddingBottom: 10},
    pb20:{paddingBottom: 20},
    pb30:{paddingBottom: 30},
    pb40:{paddingBottom: 40},
    pb50:{paddingBottom: 50},
    pb60:{paddingBottom: 60},
    pb80:{paddingBottom: 80},
    pb100:{paddingBottom: 100},

// 右边距
    pr10:{paddingRight: 10},
    pr20:{paddingRight: 20},
    pr30:{paddingRight: 30},
    pr40:{paddingRight: 40},
    pr50:{paddingRight: 50},
    pr60:{paddingRight: 60},
    pr80:{paddingRight: 80},
    pr100:{paddingRight: 100},


    // 内边距
    p10:{padding:10},
    p20:{padding:20},
    p30:{padding:30},
    p40:{padding:40},

    // 外边距
    m10:{margin:10},
    m20:{margin:20},
    m30:{margin:30},
    m40:{margin:40},

    // 垂直内边距
    pv10:{paddingVertical:10},
    pv20:{paddingVertical:20},
    pv30:{paddingVertical:30},
    pv40:{paddingVertical:40},

    // 水平内边距
    ph10:{paddingHorizontal:10},
    ph20:{paddingHorizontal:20},
    ph30:{paddingHorizontal:30},
    ph40:{paddingHorizontal:40},

    // 垂直外边距
    mv10:{paddingVertical:10},
    mv20:{paddingVertical:20},
    mv30:{paddingVertical:30},
    mv40:{paddingVertical:40},

    fsize10: {fontSize: 10},
    fsize12: {fontSize: 12},
    fsize14: {fontSize: 14},
    fsize16: {fontSize: 16},
    fsize18: {fontSize: 18},
    fsize20: {fontSize: 20},
    fsize24: {fontSize: 24},
    fsize28: {fontSize: 28},
    fsize34: {fontSize: 34},


    //居中显示
    pageCenter:{width: Resolution.scaleSize(375), height:  Resolution.scaleHeight(67),marginVertical:Resolution.scaleSize(300) , alignItems: 'center',backgroundColor:'transparent',justifyContent: 'center',position: 'absolute',top:0},

    //引导图
    guide:{backgroundColor: '#fff',},
    guideImg:{width: Resolution.scaleSize(375), height:  Resolution.scaleHeight(667)},
    guideTxtContent:{width: Resolution.scaleSize(375),alignItems: 'center',height:Resolution.scaleHeight(150),
    position:'absolute',bottom:0},
    guideTxt:{paddingHorizontal:Resolution.scaleSize(28),borderRadius:3,
        paddingVertical:Resolution.scaleSize(8),fontSize:14,color:'#2a76eb',borderWidth: 1,borderColor:'#2a76eb'},


    //弹框、加载中、版本号

    //全局
    fullWrap:{position: 'absolute',height: Resolution.scaleHeight(667),width:Resolution.scaleSize(375)},
    alertWrap: {
        width:Resolution.scaleSize(250),
        height:Resolution.scaleHeight(130),
        borderRadius: 6,
        position: 'absolute',
        top: 200,
        left: 62.5,
        overflow: 'hidden',
    },
    alertPanel: {
        flex:7,
        borderBottomWidth: 0.5,
        borderColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',

    },
    alertTitle: {
        marginBottom: 6
    },
    alertTab: {
        flex:3,
        flexDirection: 'row',
    },
    alertItem: {
        flex:1,
        justifyContent: 'center',
        alignItems: 'center',
        borderLeftWidth: 0.5,
        borderColor: '#fff',
    },
    alertItemText: {
        color:'#9b9b9b',
    },
    alertTitleText: {
        fontSize: 18,
        color:'#9b9b9b',
    },

    forbidIcon: {
        height: 16,
        width: 30,
    },
    loading: {
        alignItems: 'center',justifyContent:'center',backgroundColor:'gray',borderRadius:5,
        height: Resolution.scaleHeight(80),width:Resolution.scaleSize(80),
    },
    noData: {
        alignItems: 'center',justifyContent:'center',position:'absolute',top:Resolution.scaleHeight(230),
        height: Resolution.scaleHeight(140),width:Resolution.scaleSize(375),
    },
    noDataNoPosition: {
        alignItems: 'center',justifyContent:'center',marginTop:Resolution.scaleHeight(200),
        height: Resolution.scaleHeight(140),width:Resolution.scaleSize(375),
    },
    toast: {
        alignItems: 'center',justifyContent:'center',position:'absolute',top:Resolution.scaleHeight(100),
        height: Resolution.scaleHeight(80),width:Resolution.scaleSize(375),
    },
    toastTxt:{
        maxWidth:Resolution.scaleSize(375),padding:5,backgroundColor:'gray',borderRadius:5,
    },
    //返回头部
    header:{height: 44,width:Resolution.scaleSize(375),alignItems:'center',
        justifyContent:'center',borderColor:'#b2b2b2'},
    headerTxt:{fontSize: 16},
    headerLeft:{height: 44,width:44,alignItems: 'center',justifyContent:'center',position: 'absolute',
        top:Resolution.ifIphoneX(44,20,StatusBar.currentHeight)},
    headerRight:{height: 44,width:44, alignItems: 'center',justifyContent:'center',position: 'absolute',
        top:Resolution.ifIphoneX(44,20,StatusBar.currentHeight),right:0},




})