对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';
<View style={[styles.first,S.alignStretch]}></View>
//注： 使用方法跟原来一样。

//B. cls属性的使用
  import NativeTachyons from "./GStyle/index.js"
    class MyComponent extends Component{
        <View cls="bgGrey bottomRight" style={{height:600}} >
        ......  
        </View>
    }
    const myComponent =NativeTachyons.wrap(MyComponent);
   AppRegistry.registerComponent('MyComponent', () => myComponent);
  //注：多个属性用空格分开。