React Native 样式工具箱 
一个用于快速构建界面的样式工具库
安装
npm i react-native-stylekit --save使用
import React from 'react'import 文档
borders 边框相关
默认的 borderStyle 为 solid，默认的 borderColor 为 #D9D9D9，默认的 borderRadius 为 5px
边框类型
下面的对象默认都有 borderStyle 和 borderColor 的样式
b0: borderWidth: 0 bh: borderWidth: 05 borderColor borderStyle b1: borderWidth: 1 borderColor borderStyle bt0: borderTopWidth: 0 bth: borderTopWidth: 05 borderColor borderStyle bt1: borderTopWidth: 1 borderColor borderStyle br0: borderRightWidth: 0 brh: borderRightWidth: 05 borderColor borderStyle br1: borderRightWidth: 1 borderColor borderStyle bb0: borderBottomWidth: 0 bbh: borderBottomWidth: 05 borderColor borderStyle bb1: borderBottomWidth: 1 borderColor borderStyle bl0: borderLeftWidth: 0 blh: borderLeftWidth: 05 borderColor borderStyle bl1: borderLeftWidth: 1 borderColor borderStyle 边框其他样式
- .rounded { borderRadius: $borderRadius }
- .not-rounded { borderRadius: 0 }
colors 文字色背景色边框色
提供文字颜色、边框颜色支持的颜色
const $primary = '#337ab7'const $success = '#5cb85c'const $info = '#5bc0de'const $warning = '#f0ad4e'const $danger = '#d9534f' const $white = '#fff'const $silver = '#F4F4F4'const $lightgrey = '#ececec'const $grey = '#ccc'const $midgrey = '#777'const $darkgrey = '#444'const $black = '#222'const $trueblack = '#000'文字颜色、背景颜色、边框颜色，分别使用 colorXxx、bgXxx、borderXxx（eg. colorSuccess、bgWhite、borderBlack）
提供
textXxx作为colorXxx的别名
额外提供如下颜色对象
c0: color: #000 c1: color: #111 c2: color: #222 c3: color: #333 c4: color: #444 c5: color: #555 c6: color: #666 c7: color: #777 c8: color: #888 c9: color: #999 ca: color: #aaa cb: color: #bbb cc: color: #ccc cd: color: #ddd ce: color: #eee cf: color: #fff flex 栅格布局
Flex 容器
column: flexDirection: 'column' flexWrap: 'nowrap' row: flexDirection: 'row' flexWrap: 'wrap' Flex 定位
center: alignItems: 'center' justifyContent: 'center' topLeft: alignItems: 'flex-start' justifyContent: 'flex-start' bottomRight: alignItems: 'flex-end' justifyContent: 'flex-end' // row 和 column 定位不同，所以要分开写columnTopCenter: alignItems: 'center' justifyContent: 'flex-start' columnTopRight: alignItems: 'flex-end' justifyContent: 'flex-start' columnCenterLeft: alignItems: 'flex-start' justifyContent: 'center' columnCenterRight: alignItems: 'flex-end' justifyContent: 'center' columnBottomLeft: alignItems: 'flex-start' justifyContent: 'flex-end' columnBottomCenter: alignItems: 'center' justifyContent: 'flex-end' rowTopCenter: alignItems: 'flex-start' justifyContent: 'center' rowTopRight: alignItems: 'flex-start' justifyContent: 'flex-end' rowCenterLeft: alignItems: 'center' justifyContent: 'flex-start' rowCenterRight: alignItems: 'center' justifyContent: 'flex-end' rowBottomLeft: alignItems: 'flex-end' justifyContent: 'flex-start' rowBottomCenter: alignItems: 'flex-end' justifyContent: 'center' Flex 对齐
spaceAround: justifyContent: 'space-around' spaceBetween: justifyContent: 'space-between' alignStart: alignSelf: 'flex-start' alignCenter: alignSelf: 'center' alignEnd: alignSelf: 'flex-end' alignStretch: alignSelf: 'stretch' Flex Size
flex1: flex: 1 flex2: flex: 2 flex3: flex: 3 flex4: flex: 4 flex5: flex: 5 typography 排版相关
文本对齐
textCenter: textAlign: 'center' textLeft: textAlign: 'left' textRight: textAlign: 'right'
tc、tl、tr分别作为textCenter、textLeft、textRight的别名
字体大小
fs12: fontSize: 12 fs13: fontSize: 13 fs14: fontSize: 14 fs15: fontSize: 15 fs16: fontSize: 16 ...fs35: fontSize: 35 fs36: fontSize: 36 行高
lh12: lineHeight: 12 lh13: lineHeight: 13 lh14: lineHeight: 14 lh15: lineHeight: 15 lh16: lineHeight: 16 ...lh71: lineHeight: 71 lh72: lineHeight: 72 其他字体样式
italic: fontStyle: 'italic' tracked: letterSpacing: 4 noTextDecoration: textDecorationLine: 'none' underline: textDecorationLine: 'underline' lineThrough: textDecorationLine: 'line-through' thin: fontWeight: 200 regular: fontWeight: 400 bold: fontWeight: 700 utilities 其他工具
overflow
overflowHidden: overflow: 'hidden' overflowVisible: overflow: 'visible' ofh，ofv 作为 overflowHidden，overflowVisible 的别名
position
relative: position: 'relative' absolute: position: 'absolute' top: top: 0 right: right: 0 bottom: bottom: 0 left: left: 0 image
imgCover: resizeMode: 'cover' imgContain: resizeMode: 'contain' imgStretch: resizeMode: 'stretch' whitespace 内补外补
提供内补和外补，以 10 为粒度
内补
p0 padding: 0 p5 padding: 5 p10 padding: 10 ...p50 padding: 50 /*pt => paddingToppr => paddingRightpb => paddingBottompl => paddingLeft*/pt0 paddingTop: 0 pt5 paddingTop: 5 pt10 paddingTop: 10 ...pt50 paddingTop: 50 /*ptb => paddingTop & paddingBottomplr => paddingRight & paddingLeft*/ptb0 paddingTop: 0 paddingBottom: 0 ptb5 paddingTop: 5 paddingBottom: 5 ptb10 paddingTop: 10 paddingBottom: 10 ...ptb5 paddingTop: 50 paddingBottom: 50 外补
外补同补风格一致，对象前缀为 m