PLC/vPLC>> react-native-stylekit>> 返回
项目作者： afeiship

项目描述 ：
Styles base for react native.
高级语言： JavaScript
项目地址: git://github.com/afeiship/react-native-stylekit.git
创建时间： 2017-07-27T03:28:48Z
项目社区：https://github.com/afeiship/react-native-stylekit
开源协议：MIT License
下载


react-native-stylekit

Style toolkit for react native.

config:

  1. import {
  2.   $binder,
  3.   styles,
  4.   generateBlank,
  5.   generateBorderRadius,
  6.   generateBox,
  7.   genarateColor,
  8.   genarateBgColor,
  9.   generateFontSize,
  10.   generateW1,
  11.   generateWp
  12. } from 'react-native-stylekit';
  14. // YOUR CONFIG:
  15. const STYLE_CONFIG = {
  16.   blank: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 30],
  17.   borderRadius: [1, 2, 3, 4, 5],
  18.   box: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 30],
  19.   color: {
  20.     c: '#ccc',
  21.     d: '#ddd',
  22.     e: '#eee',
  23.     f: '#fff',
  24.     0: '#000',
  25.     3: '#333',
  26.     6: '#666',
  27.     9: '#999',
  28.     gold: '#A78845'
  29.   },
  30.   fontSize: [8, 10, 12, 14, 16, 18, 20, 22, 14, 16, 28, 30],
  31.   w1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20],
  32.   wp: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  33. };
  35. // Create dyanmic styles:
  36. const _styles = Object.assign(
  37.   styles,
  38.   generateBlank(STYLE_CONFIG.blank),
  39.   generateBlank(STYLE_CONFIG.borderRadius),
  40.   genarateColor(STYLE_CONFIG.color),
  41.   genarateBgColor(STYLE_CONFIG.color),
  42.   generateFontSize(STYLE_CONFIG.fontSize),
  43.   generateW1(STYLE_CONFIG.w1),
  44.   generateWp(STYLE_CONFIG.wp),
  45.   generateBox(STYLE_CONFIG.box, 'p'),
  46.   generateBox(STYLE_CONFIG.box, 'px'),
  47.   generateBox(STYLE_CONFIG.box, 'py'),
  48.   generateBox(STYLE_CONFIG.box, 'pt'),
  49.   generateBox(STYLE_CONFIG.box, 'pr'),
  50.   generateBox(STYLE_CONFIG.box, 'pb'),
  51.   generateBox(STYLE_CONFIG.box, 'pl'),
  52.   generateBox(STYLE_CONFIG.box, 'm'),
  53.   generateBox(STYLE_CONFIG.box, 'mx'),
  54.   generateBox(STYLE_CONFIG.box, 'my'),
  55.   generateBox(STYLE_CONFIG.box, 'mt'),
  56.   generateBox(STYLE_CONFIG.box, 'mr'),
  57.   generateBox(STYLE_CONFIG.box, 'mb'),
  58.   generateBox(STYLE_CONFIG.box, 'ml'),
  59. );
  62. // export to your project: $style, $sk
  63. export const $sk = (inString) => {
  64.   return $binder(_styles)(inString);
  65. };
  67. export default _styles;

usage:

  1. // Use $style
  2. <View style={[$style.cRed, $style.m_10]}></View>
  4. // Use $sk
  5. <View style={$sk('cRed m_10')}></View>
  7. // Or you can use $sk
  8. <View style={$sk('cRed m-10')}></View>

resources: