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

usage:

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

resources: