对ReactNative样式的封装，跟style属性可以同时使用
Paste_Image.png
直接上代码。
目录结构
Paste_Image.png
首先是Gstyle文件夹。该文件夹下面封装了部分常用样式。
_borders.js
const borderColor = '#D9D9D9'
const borderStyle = 'solid'
const borderRadius = 5
export default {
b0: { borderWidth: 0 },
bh: { borderWidth: 0.5, borderColor, borderStyle },
b1: { borderWidth: 1, borderColor, borderStyle },
bt0: { borderTopWidth: 0 },
bth: { borderTopWidth: 0.5, borderColor, borderStyle },
bt1: { borderTopWidth: 1, borderColor, borderStyle },
br0: { borderRightWidth: 0 },
brh: { borderRightWidth: 0.5, borderColor, borderStyle },
br1: { borderRightWidth: 1, borderColor, borderStyle },
bb0: { borderBottomWidth: 0 },
bbh: { borderBottomWidth: 0.5, borderColor, borderStyle },
bb1: { borderBottomWidth: 1, borderColor, borderStyle },
bl0: { borderLeftWidth: 0 },
blh: { borderLeftWidth: 0.5, borderColor, borderStyle },
bl1: { borderLeftWidth: 1, borderColor, borderStyle },
rounded: { borderRadius },
notRounded: { borderRadius: 0 },
circle: { borderRadius: 50 }
}
_colors.js
const $primary = '#337ab7' //蓝
const $success = '#5cb85c' // 绿
const $info = '#5bc0de' //淡蓝
const $warning = '#f0ad4e' //橘色
const $danger = '#d9534f' //红色
const $white = '#fff' //白色
const $silver = '#F4F4F4' //灰 1
const $lightgrey = '#ececec' //灰2
const $grey = '#ccc' //灰3
const $midgrey = '#777' //灰4
const $darkgrey = '#444' //灰5
const $black = '#222'//黑色
const $trueblack = '#000' //黑色
export default {
// ====================================================
// Text Colors
// ====================================================
colorPrimary: { color: $primary },
colorSuccess: { color: $success },
colorInfo: { color: $info },
colorWarning: { color: $warning },
colorDanger: { color: $danger },
textPrimary: { color: $primary },
textSuccess: { color: $success },
textInfo: { color: $info },
textWarning: { color: $warning },
textDanger: { color: $danger },
colorWhite: { color: $white },
colorSilver: { color: $silver },
colorLightgrey: { color: $lightgrey },
colorGrey: { color: $grey },
colorMidgrey: { color: $midgrey },
colorDarkgrey: { color: $darkgrey },
colorBlack: { color: $black },
colorTrueblack: { color: $trueblack },
colorInherit: { color: 'inherit' },
colorTransparent: { color: 'transparent' },
textWhite: { color: $white },
textSilver: { color: $silver },
textLightgrey: { color: $lightgrey },
textGrey: { color: $grey },
textMidgrey: { color: $midgrey },
textDarkgrey: { color: $darkgrey },
textBlack: { color: $black },
textTrueblack: { color: $trueblack },
textInherit: { color: 'inherit' },
textTransparent: { color: 'transparent' },
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' },
// ====================================================
// Background Colors
// ====================================================
bgPrimary: { backgroundColor: $primary },
bgSuccess: { backgroundColor: $success },
bgInfo: { backgroundColor: $info },
bgWarning: { backgroundColor: $warning },
bgDanger: { backgroundColor: $danger },
bgWhite: { backgroundColor: $white },
bgSilver: { backgroundColor: $silver },
bgLightgrey: { backgroundColor: $lightgrey },
bgGrey: { backgroundColor: $grey },
bgMidgrey: { backgroundColor: $midgrey },
bgDarkgrey: { backgroundColor: $darkgrey },
bgBlack: { backgroundColor: $black },
bgTrueblack: { backgroundColor: $trueblack },
bgTransparent: { backgroundColor: 'transparent' },
// ====================================================
// Border Colors
// ====================================================
borderPrimary: { borderColor: $primary },
borderSuccess: { borderColor: $success },
borderInfo: { borderColor: $info },
borderWarning: { borderColor: $warning },
borderDanger: { borderColor: $danger },
borderWhite: { borderColor: $white },
borderSilver: { borderColor: $silver },
borderLightgrey: { borderColor: $lightgrey },
borderGrey: { borderColor: $grey },
borderMidgrey: { borderColor: $midgrey },
borderDarkgrey: { borderColor: $darkgrey },
borderBlack: { borderColor: $black },
borderTrueblack: { borderColor: $trueblack },
borderTransparent: { borderColor: 'transparent' },
}
_flex.js
export default {
// ====================================================
// 方向
// ====================================================
column: { flexDirection: 'column', flexWrap: 'nowrap' },//列 主轴为垂直方向
row: { flexDirection: 'row', flexWrap: 'wrap' },//行 主轴为水平方向
// ====================================================
// Positioning for Flex Items //父View下所有View排列方式
// ====================================================
center: { alignItems: 'center', justifyContent: 'center' },//水平居中
topLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },//左上
bottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },//左下
topRight: { alignItems: 'flex-end', justifyContent: 'flex-start' },//右上
bottomRight: { alignItems: 'flex-end', justifyContent: 'flex-end' },//右下
stretch:{alignItems:'stretch'},
//列
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' },//底部列居右
//行 注：需要把 flexDirection:row
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 Item Alignment
// ====================================================
spaceAround: { justifyContent: 'space-around' }, // |--口--口--|//效果
spaceBetween: { justifyContent: 'space-between' },// |口------口|//效果
alignStart: { alignSelf: 'flex-start'},//起始位置
alignCenter: { alignSelf: 'center' },//结束
alignEnd: { alignSelf: 'flex-end' },//结束位置
alignStretch: { alignSelf: 'stretch' },
absoluteFill: {position: 'absolute',top: 0,left: 0,right: 0,bottom: 0},
absoluteTop: {position: 'absolute',top: 0,left: 0,right: 0},
absoluteLeft: {position: 'absolute',top: 0,left: 0,bottom: 0},
absoluteRight: {position: 'absolute',top: 0,right: 0, bottom: 0},
absoluteBottom:{position: 'absolute',left: 0,right: 0, bottom: 0},
}
_typography.js
export default {
// ====================================================
// 方向
// ====================================================
column: { flexDirection: 'column', flexWrap: 'nowrap' },//列 主轴为垂直方向
row: { flexDirection: 'row', flexWrap: 'wrap' },//行 主轴为水平方向
// ====================================================
// Positioning for Flex Items //父View下所有View排列方式
// ====================================================
center: { alignItems: 'center', justifyContent: 'center' },//水平居中
topLeft: { alignItems: 'flex-start', justifyContent: 'flex-start' },//左上
bottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },//左下
topRight: { alignItems: 'flex-end', justifyContent: 'flex-start' },//右上
bottomRight: { alignItems: 'flex-end', justifyContent: 'flex-end' },//右下
stretch:{alignItems:'stretch'},
//列
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' },//底部列居右
//行 注：需要把 flexDirection:row
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 Item Alignment
// ====================================================
spaceAround: { justifyContent: 'space-around' }, // |--口--口--|//效果
spaceBetween: { justifyContent: 'space-between' },// |口------口|//效果
alignStart: { alignSelf: 'flex-start'},//起始位置
alignCenter: { alignSelf: 'center' },//结束
alignEnd: { alignSelf: 'flex-end' },//结束位置
alignStretch: { alignSelf: 'stretch' },
absoluteFill: {position: 'absolute',top: 0,left: 0,right: 0,bottom: 0},
absoluteTop: {position: 'absolute',top: 0,left: 0,right: 0},
absoluteLeft: {position: 'absolute',top: 0,left: 0,bottom: 0},
absoluteRight: {position: 'absolute',top: 0,right: 0, bottom: 0},
absoluteBottom:{position: 'absolute',left: 0,right: 0, bottom: 0},
// ====================================================
// Flex Sizing
// ====================================================
flex1: { flex: 1 },
flex2: { flex: 2 },
flex3: { flex: 3 },
flex4: { flex: 4 },
flex5: { flex: 5 },
flex6: { flex: 6 },
flex7: { flex: 7 },
flex8: { flex: 8 },
flex9: { flex: 9 },
}
_utilites.js
export default {
// overflow
overflowHidden: { overflow: 'hidden' },
overflowVisible: { overflow: 'visible' },
// 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.js
const $padding = 10
const $margin = 10
export default {
// ====================================================
// Padding
// ====================================================
// All
p5: { padding: $padding * 0.5 },
p10: { padding: $padding },
p15: { padding: $padding * 1.5 },
p20: { padding: $padding * 2 },
p30: { padding: $padding * 3 },
p40: { padding: $padding * 4 },
p50: { padding: $padding * 5 },
// Top
pt5: { paddingTop: $padding * 0.5 },
pt10: { paddingTop: $padding },
pt15: { paddingTop: $padding * 1.5 },
pt20: { paddingTop: $padding * 2 },
pt30: { paddingTop: $padding * 3 },
pt40: { paddingTop: $padding * 4 },
pt50: { paddingTop: $padding * 5 },
// Right
pr5: { paddingRight: $padding * 0.5 },
pr10: { paddingRight: $padding },
pr15: { paddingRight: $padding * 1.5 },
pr20: { paddingRight: $padding * 2 },
pr30: { paddingRight: $padding * 3 },
pr40: { paddingRight: $padding * 4 },
pr50: { paddingRight: $padding * 5 },
// Bottom
pb5: { paddingBottom: $padding * 0.5 },
pb10: { paddingBottom: $padding },
pb15: { paddingBottom: $padding * 1.5 },
pb20: { paddingBottom: $padding * 2 },
pb30: { paddingBottom: $padding * 3 },
pb40: { paddingBottom: $padding * 4 },
pb50: { paddingBottom: $padding * 5 },
// Left
pl5: { paddingLeft: $padding * 0.5 },
pl10: { paddingLeft: $padding },
pl15: { paddingLeft: $padding * 1.5 },
pl20: { paddingLeft: $padding * 2 },
pl30: { paddingLeft: $padding * 3 },
pl40: { paddingLeft: $padding * 4 },
pl50: { paddingLeft: $padding * 5 },
// Top-Bottom
ptb5: { paddingTop: $padding * 0.5, paddingBottom: $padding * 0.5 },
ptb10: { paddingTop: $padding, paddingBottom: $padding },
ptb15: { paddingTop: $padding * 1.5, paddingBottom: $padding * 1.5 },
ptb20: { paddingTop: $padding * 2, paddingBottom: $padding * 2 },
ptb30: { paddingTop: $padding * 3, paddingBottom: $padding * 3 },
ptb40: { paddingTop: $padding * 4, paddingBottom: $padding * 4 },
ptb50: { paddingTop: $padding * 5, paddingBottom: $padding * 5 },
// Left-Right
plr5: { paddingLeft: $padding * 0.5, paddingRight: $padding * 0.5 },
plr10: { paddingLeft: $padding, paddingRight: $padding },
plr15: { paddingLeft: $padding * 1.5, paddingRight: $padding * 1.5 },
plr20: { paddingLeft: $padding * 2, paddingRight: $padding * 2 },
plr30: { paddingLeft: $padding * 3, paddingRight: $padding * 3 },
plr40: { paddingLeft: $padding * 4, paddingRight: $padding * 4 },
plr50: { paddingLeft: $padding * 5, paddingRight: $padding * 5 },
// ====================================================
// Margins
// ====================================================
// All
m5: { margin: $margin * 0.5 },
m10: { margin: $margin },
m15: { margin: $margin * 1.5 },
m20: { margin: $margin * 2 },
m30: { margin: $margin * 3 },
m40: { margin: $margin * 4 },
m50: { margin: $margin * 5 },
// Top
mt5: { marginTop: $margin * 0.5 },
mt10: { marginTop: $margin },
mt15: { marginTop: $margin * 1.5 },
mt20: { marginTop: $margin * 2 },
mt30: { marginTop: $margin * 3 },
mt40: { marginTop: $margin * 4 },
mt50: { marginTop: $margin * 5 },
// Right
mr5: { marginRight: $margin * 0.5 },
mr10: { marginRight: $margin },
mr15: { marginRight: $margin * 1.5 },
mr20: { marginRight: $margin * 2 },
mr30: { marginRight: $margin * 3 },
mr40: { marginRight: $margin * 4 },
mr50: { marginRight: $margin * 5 },
// Bottom
mb5: { marginBottom: $margin * 0.5 },
mb10: { marginBottom: $margin },
mb15: { marginBottom: $margin * 1.5 },
mb20: { marginBottom: $margin * 2 },
mb30: { marginBottom: $margin * 3 },
mb40: { marginBottom: $margin * 4 },
mb50: { marginBottom: $margin * 5 },
// Left
ml5: { marginLeft: $margin * 0.5 },
ml10: { marginLeft: $margin },
ml15: { marginLeft: $margin * 1.5 },
ml20: { marginLeft: $margin * 2 },
ml30: { marginLeft: $margin * 3 },
ml40: { marginLeft: $margin * 4 },
ml50: { marginLeft: $margin * 5 },
// Top/Bottom
mtb5: { marginTop: $margin * 0.5, marginBottom: $margin * 0.5 },
mtb10: { marginTop: $margin, marginBottom: $margin },
mtb15: { marginTop: $margin * 1.5, marginBottom: $margin * 1.5 },
mtb20: { marginTop: $margin * 2, marginBottom: $margin * 2 },
mtb30: { marginTop: $margin * 3, marginBottom: $margin * 3 },
mtb40: { marginTop: $margin * 4, marginBottom: $margin * 4 },
mtb50: { marginTop: $margin * 5, marginBottom: $margin * 5 },
// Left/Right
mlr5: { marginLeft: $margin * 0.5, marginRight: $margin * 0.5 },
mlr10: { marginLeft: $margin, marginRight: $margin },
mlr15: { marginLeft: $margin * 1.5, marginRight: $margin * 1.5 },
mlr20: { marginLeft: $margin * 2, marginRight: $margin * 2 },
mlr30: { marginLeft: $margin * 3, marginRight: $margin * 3 },
mlr40: { marginLeft: $margin * 4, marginRight: $margin * 4 },
mlr50: { marginLeft: $margin * 5, marginRight: $margin * 5 },
}
index.js
import _borders from './_borders'
import _colors from './_colors'
import _flex from './_flex'
import _typography from './_typography'
import _whitespace from './_whitespace'
import _utilities from './_utilities'
export default Object.assign({}, _borders, _colors, _flex, _typography, _whitespace, _utilities)
以上就是Gstlye里面封装的常用样式，可根据自身需要增加。
使用cls属性的主要代码(代码参考https://github.com/tachyons-css/react-native-style-tachyons)
import React from "react";
import _ from "lodash";
import Gstyle from "./Gstyle/index.js";
// import cssColors from "css-color-names"
export function wrap(WrappedComponent) {
const newClass = class extends WrappedComponent {
render() {
return this._recursiveStyle(super.render());
}
_recursiveStyle(elementsTree) {
const props = elementsTree.props;
let newProps;
let translated = false;
/* Parse cls string */
if (_.isString(props.cls)) {
newProps = {}
translated = true
if (_.isArray(props.style)) {
newProps.style = props.style.slice()
} else if (_.isObject(props.style)) {
newProps.style = [props.style]
} else {
newProps.style = []
}
const splitted = props.cls.replace(/-/g, "_").split(" ")
for (let i = 0; i < splitted.length; i++) {
const cls = splitted[i];
if (cls.length > 0) {
const style = Gstyle[cls];
if (style) {
/* Style found */
newProps.style.push(style);
}
else {
throw new Error(`style '${cls}' not found`);
}
}
}
}
let newChildren = props.children;
if (_.isArray(newChildren)) {
/* Convert child array */
newChildren = React.Children.toArray(newChildren);
for (let i = 0; i < newChildren.length; i++) {
const c = newChildren[i];
if (React.isValidElement(c)) {
const converted = this._recursiveStyle(c);
if (converted !== c) {
translated = true;
newChildren[i] = converted;
}
}
}
} else if (React.isValidElement(newChildren)) {
/* Convert single child */
const converted = this._recursiveStyle(newChildren);
if (converted !== newChildren) {
translated = true;
newChildren = converted;
}
}
if (translated) {
return React.cloneElement(elementsTree, newProps, newChildren)
}
return elementsTree;
}
}
/* Fix name */
newClass.displayName = WrappedComponent.displayName || WrappedComponent.name
return newClass;
}
index.js
import * as reactWrapper from "./reactWrapper";
const NativeTachyons = {
wrap: reactWrapper.wrap,
}
export default NativeTachyons;
export const wrap = reactWrapper.wrap;
使用说明
1 Gstyle文件夹
//该文件下下面包含了六种封装的样式（暂定，以后根据需求再进行补充），分别是
// a. _borders.js 主要封装了边框的颜色和样式以及弧度
// b. _colors.js 封装了常用的颜色以及背景颜色
// c. _flex.js 封装了常用的布局样式（flex）
// d. _typography 封装了字体的样式（大小，行高，斜体粗体等）
// e. _utillities 其他样式封装
// f. _whitespace 内边距，外边距的封装
2 使用方法
// A. Gstyle的使用
import S from './GStyle/Gstyle/index';
......
}
const myComponent =NativeTachyons.wrap(MyComponent);
AppRegistry.registerComponent('MyComponent', () => myComponent);
//注：多个属性用空格分开。