移动端:RN 基础样式 commonStyle

/**
 * Created by 01 on 2016/10/26.
 */
import React, { Component } from 'react';
import {
    StyleSheet,View,Image,Text,TouchableOpacity,Dimensions
    } from 'react-native';

//屏幕尺寸
export const [sizeWidth,sizeHeight,px]=[
    Dimensions.get('window').width,//屏幕宽度
    Dimensions.get('window').height == 812 ?667 : Dimensions.get('window').height , //屏幕高度
    sizeHeight/1334
]

//公共样式
export const commonStyles=StyleSheet.create({
    abs:{position:'absolute'},
    rel:{position:'relative'},
    row:{flexDirection:'row'},
    column:{flexDirection:'column'},
    flex:{flex:1},
    left:{alignSelf:'flex-start'},
    right:{alignItems:'flex-end'},
    center:{alignItems:'center'},
    start:{justifyContent:'flex-start'},
    vertical:{justifyContent:'center'},
    between:{justifyContent:'space-between'},
    end:{justifyContent:'flex-end'},
    fz9:{fontSize:9*px},
    fz10:{fontSize:10*sizeHeight/1334},
    fz11:{fontSize:11*sizeHeight/1334},
    fz12:{fontSize:12*sizeHeight/1334},
    fz13:{fontSize:13*sizeHeight/1334},
    fz14:{fontSize:14*sizeHeight/1334},
    fz15:{fontSize:15*sizeHeight/1334},
    fz16:{fontSize:16*sizeHeight/1334},
    fz18:{fontSize:18*sizeHeight/1334},
    fz20:{fontSize:20*sizeHeight/1334},
    fz22:{fontSize:22*sizeHeight/1334},
    fz24:{fontSize:24*sizeHeight/1334},
    fz26:{fontSize:26*sizeHeight/1334},
    fz28:{fontSize:28*sizeHeight/1334},
    fz30:{fontSize:30*sizeHeight/1334},
    fz32:{fontSize:32*sizeHeight/1334},
    fz34:{fontSize:34*sizeHeight/1334},
    fz36:{fontSize:36*sizeHeight/1334},
    fz40:{fontSize:40*sizeHeight/1334},
    white:{color:'#fff'},
    black:{color:'#000'},
    gray:{color:'#808080'},
    color3:{color:'#333'},
    color6:{color:'#666'},
    color9:{color:'#999'},
    colorc:{color:'#cccccc'},
    mainColor:{color:'#a49568'},
    bold:{fontWeight:'700'},
    normal:{fontWeight:'400'},
    mt0:{marginTop:0},
    mt6:{marginTop:6*sizeHeight/1334},
    mt9:{marginTop:9*sizeHeight/1334},
    mt10:{marginTop:10*sizeHeight/1334},
    mt12:{marginTop:12*sizeHeight/1334},
    mt15:{marginTop:15*sizeHeight/1334},
    mt20:{marginTop:20*sizeHeight/1334},
    mt25:{marginTop:25*sizeHeight/1334},
    mt30:{marginTop:30*sizeHeight/1334},
    mt28:{marginTop:28*sizeHeight/1334},
    mt35:{marginTop:35*sizeHeight/1334},
    mb0:{marginBottom:0},
    mb1:{marginBottom:1*sizeHeight/1334},
    mb6:{marginBottom:6*sizeHeight/1334},
    mb9:{marginBottom:9*sizeHeight/1334},
    mb10:{marginBottom:10*sizeHeight/1334},
    mb12:{marginBottom:12*sizeHeight/1334},
    mb15:{marginBottom:15*sizeHeight/1334},
    mb20:{marginBottom:20*sizeHeight/1334},
    mb25:{marginBottom:25*sizeHeight/1334},
    mb30:{marginBottom:30*sizeHeight/1334},
    mb35:{marginBottom:35*sizeHeight/1334},
    ml6:{marginLeft:6*sizeWidth/750},
    ml10:{marginLeft:10*sizeWidth/750},
    ml12:{marginLeft:12*sizeWidth/750},
    ml15:{marginLeft:15*sizeWidth/750},
    ml20:{marginLeft:20*sizeWidth/750},
    ml25:{marginLeft:25*sizeWidth/750},
    ml35:{marginLeft:35*sizeWidth/750},
    ml48:{marginLeft:48*sizeWidth/750},
    mr0:{marginRight:0*sizeWidth/750},
    mr6:{marginRight:6*sizeWidth/750},
    mr10:{marginRight:10*sizeWidth/750},
    mr12:{marginRight:12*sizeWidth/750},
    mr15:{marginRight:15*sizeWidth/750},
    mr20:{marginRight:20*sizeWidth/750},
    mr25:{marginRight:25*sizeWidth/750},
    mh10:{marginHorizontal:10*sizeWidth/750},
    mh20:{marginHorizontal:20*sizeWidth/750},
    mv10:{paddingVertical:10*sizeHeight/1334},
    mv20:{paddingVertical:20*sizeHeight/1334},
    mv30:{paddingVertical:30*sizeHeight/1334},
    pl10:{paddingLeft:10*sizeWidth/750},
    pl12:{paddingLeft:12*sizeWidth/750},
    pl15:{paddingLeft:15*sizeWidth/750},
    pl20:{paddingLeft:20*sizeWidth/750},
    pr10:{paddingRight:10*sizeWidth/750},
    pr12:{paddingRight:12*sizeWidth/750},
    pr20:{paddingRight:20*sizeWidth/750},
    pt10:{paddingTop:10*sizeHeight/1334},
    pt12:{paddingTop:12*sizeHeight/1334},
    pt15:{paddingTop:15*sizeHeight/1334},
    pt20:{paddingTop:20*sizeHeight/1334},
    pt30:{paddingTop:30*sizeHeight/1334},
    pb10:{paddingBottom:10*sizeHeight/1334},
    pb12:{paddingBottom:12*sizeHeight/1334},
    pb15:{paddingBottom:15*sizeHeight/1334},
    pb20:{paddingBottom:20*sizeHeight/1334},
    pb30:{paddingBottom:30*sizeHeight/1334},
    pb40:{paddingBottom:40*sizeHeight/1334},
    ph0:{paddingHorizontal:0},
    ph10:{paddingHorizontal:10*sizeWidth/750},
    ph20:{paddingHorizontal:20*sizeWidth/750},
    pv10:{paddingVertical:10*sizeHeight/1334},
    pv20:{paddingVertical:20*sizeHeight/1334},
    pv30:{paddingVertical:30*sizeHeight/1334},
    p10:{padding:10*sizeHeight/1334},
    p12:{padding:12*sizeHeight/1334},
    p20:{padding:20*sizeHeight/1334},
    lh18:{lineHeight:18*sizeHeight/1334},
    bg0:{backgroundColor:'#000'},
    bgc:{backgroundColor:'#ccc'},
    bgf:{backgroundColor:'#fff'},
    bgm:{backgroundColor:'#a49568'},
    bgeb:{backgroundColor:'#ebe8de'},
    bgf4: {backgroundColor: '#f4f4f4'},
    border:{ borderWidth:1*sizeWidth/750, borderStyle:'solid' },
    borderC:{ borderColor:'#ccc'},
    borderF:{borderColor:'#fff'},
    borWhite:{
        borderWidth:1,
        borderStyle:'solid',
        borderColor:'#a49568'
    },
    topbor:{borderTopWidth:1*sizeHeight/1334,borderColor:'#ccc'},
    btmbor:{borderBottomWidth:1*sizeHeight/1334,borderColor:'#ccc'},
    bor:{borderWidth:1*sizeHeight/1334,borderColor:'#a49569'},

    //弹出框背景
    popupStyle:{
        width:320*sizeWidth/750,
        height:160*sizeHeight/1334,
        alignItems:"center",
        justifyContent:"center",
        borderRadius:4,
        backgroundColor:'rgba(0,0,0,0.7)'
    },
    //ͨ通栏按钮 主色背景
    btnM:{height:90*sizeHeight/1334,backgroundColor:'#a49569'},
    //主材列表货物状态
    arrivalBtn:{
        width:90*sizeWidth/750,
        height:36*sizeHeight/1334,
        alignItems:'center',
        justifyContent: 'center',
        borderRadius:2*sizeHeight/1334
    },
    pt34:{paddingTop:34*sizeHeight/1334},
    mt38:{marginTop:38*sizeHeight/1334},
    flexWrap:{flexWrap: 'wrap'},
    bgShade: {backgroundColor: 'rgba(0,0,0,0.5)'},
    mR25: {marginRight: 25 * sizeWidth / 750},
    mt50: {marginTop: 50 * sizeHeight / 1334},
    mt60: {marginTop: 60 * sizeHeight / 1334},
    mb40: {marginBottom: 40 * sizeHeight / 1334},
    borderEC: {borderColor: "#ececec"},
    mt40:{marginTop:40*sizeHeight/1334},
    mb60:{marginBottom:60*sizeHeight/1334},
    ml100:{marginLeft:100*sizeWidth/750},
    color0:{color:'#000000'},
    mt3:{marginTop:3*sizeHeight/1334},
    ml5:{marginLeft:5*sizeWidth/750},
    mt5:{marginTop:5*sizeHeight/1334},
    pl30:{paddingLeft:30*sizeWidth/750},
    pr30:{paddingRight:30*sizeWidth/750},
    pt28:{paddingTop:28*sizeHeight/1334},
    pt18:{paddingTop:18*sizeHeight/1334},
    ph15:{paddingHorizontal:15*sizeWidth/750},
    fz48:{fontSize:48*sizeHeight/1334},
    ml30:{marginLeft:30*sizeWidth/750},
    mr30:{marginRight:30*sizeWidth/750},
    ml40:{marginLeft:40*sizeWidth/750},
    mr40:{marginRight:40*sizeWidth/750},
    mr45:{marginRight:45*sizeWidth/750},
    ml60:{marginLeft:60*sizeWidth/750},
    closeStyle:{
        paddingRight:40*sizeWidth/750,
        paddingTop:40*sizeHeight/1335
    },
    delayedRedColor:{color:'#BC4C44'},
    pt50:{paddingTop:50*sizeHeight/1334},
    pt116:{paddingTop:116*sizeHeight/1334},
    pt40:{paddingTop:40*sizeHeight/1334},
    mt33:{marginTop:33*sizeHeight/1334},
});

你可能感兴趣的:(移动端:RN 基础样式 commonStyle)