封装一个基于UI标准的公用样式表
我们在开发UI界面的时候，很多地方需要按照UI的规范来给定样式。比如页面的背景颜色，分割线的高度、颜色，默认的文本颜色和字号等等。如果我们在开发UI时每次都是再去重新量下分割线的高度、颜色，每次取下页面的背景颜色值，这样无疑就是多做了很多重复而又无用的工作，降低了工作效率。我们完全可以把这些常用的规范统一成一个样式文件。这样每次取背景颜色直接从样式文件中获取，而不需要再去吸取颜色值。并且后期UI如果想换个背景颜色什么的，我们也可以做到一处修改，全局更换。
样式文件源码如下，同学们也可以直接下载commonStyle.js文件，拖到项目中即可使用
/** 公共样式表 **/
import {Platform} from 'react-native'
export const commonStyle = {
/** color **/
// 常用颜色
red: '#FF0000',
orange: '#FFA500',
yellow: '#FFFF00',
green: '#00FF00',
cyan: '#00FFFF',
blue: '#0000FF',
purple: '#800080',
black: '#000',
white: '#FFF',
gray: '#808080',
drakGray: '#A9A9A9',
lightGray: '#D3D3D3',
tomato: '#FF6347',
PeachPuff: '#FFDAB9',
clear: 'transparent',
/** 主题色 **/
themeColor: '#e74c3c',
// 默认灰色字体颜色
textGrayColor: '#989898',
// 默认黑色字体颜色
textBlockColor: '#262626',
// 默认背景颜色
bgColor: '#E6E6E6',
// 默认分割线颜色
lineColor: '#E6E6E6',
// 默认placeholder颜色
placeholderColor: '#eee',
// borderColor
borderColor: '#808080',
// 导航title 颜色
navTitleColor: '#262626',
// 导航左item title color
navLeftTitleColor: '#333',
// 导航右item title color
navRightTitleColor: '#333',
navThemeColor: '#FEFEFE',
iconGray: '#989898',
iconBlack: '#262626',
/** space **/
// 上边距
marginTop: 10,
// 左边距
marginLeft: 10,
// 下边距
marginBotton: 10,
// 右边距
marginRight: 10,
// 内边距
padding: 10,
// 导航的leftItem的左间距
navMarginLeft: 15,
// 导航的rightItem的右间距
navMarginRight: 15,
/** width **/
// 导航栏左右按钮image宽度
navImageWidth: 25,
// 边框线宽度
borderWidth: 1,
// 分割线高度
lineWidth: 0.8,
/** height **/
// 导航栏的高度
navHeight: Platform.OS === 'ios' ? 64 : 56,
// 导航栏顶部的状态栏高度
navStatusBarHeight: Platform.OS === 'ios' ? 20 : 0,
// 导航栏除掉状态栏的高度
navContentHeight: Platform.OS === 'ios' ? 44 : 56,
// tabBar的高度
tabBar: 49,
// 底部按钮高度
bottonBtnHeight: 44,
// 通用列表cell高度
cellHeight: 44,
// 导航栏左右按钮image高度
navImageHeight: 25,
/** font **/
// 默认文字字体
textFont: 14,
// 默认按钮文字字体
btnFont: 15,
// 导航title字体
navTitleFont: 17,
// tabBar文字字体
barBarTitleFont: 12,
// 占位符的默认字体大小
placeholderFont: 13,
// 导航左按钮的字体
navRightTitleFont: 15,
// 导航右按钮字体
navLeftTitleFont: 15,
/** opacity **/
// mask
modalOpacity: 0.3,
// touchableOpacity
taOpacity: 0.1,
/** 定位 **/
absolute: 'absolute',
/** flex **/
around: 'space-around',
between: 'space-between',
center: 'center',
row: 'row'
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent