1 | # rn-less
|
2 |
|
3 | Style react-native with less.
|
4 |
|
5 | Powered by [react-native-css](https://github.com/sabeurthabti/react-native-css) and [less.js](http://lesscss.org/).
|
6 |
|
7 | ### Example
|
8 |
|
9 | ``` less
|
10 | rn-config{//style's config
|
11 | arguments: containerMargin,bgColor;//arguments used in less
|
12 | }
|
13 | CardExampleStyle {
|
14 | .render-title{
|
15 | flex: 1;
|
16 | align-items: center;
|
17 | margin-top: 20;
|
18 | .title-text{
|
19 | font-size: 20
|
20 | }
|
21 | }
|
22 | .container {
|
23 | flex: 1;
|
24 | margin-top: containerMargin;// use the variable declared above
|
25 | margin-bottom: "containerMargin";// use the variable with string
|
26 | .title {
|
27 | font-size: "containerMargin/2";// and any expression starts with variable name
|
28 | background-color: bgColor;
|
29 | }
|
30 | }
|
31 | }
|
32 | ```
|
33 |
|
34 | ```jsx
|
35 | import { rnLess } from 'rn-less/src/runtime';// import the decorator
|
36 | import style from './a.less.js'; // import the style
|
37 |
|
38 | const rootStyle = style({containerMargin,bgColor});// pass your arguments and get the style object
|
39 |
|
40 | //decorate the component with the style
|
41 | //write the decorator in this a.b way to let the vscode extention track the style
|
42 | @rnLess(rootStyle.CardExampleStyle)
|
43 | class CardExample extends Component {
|
44 | //the strings in the style attribute are the class names in the less file
|
45 | _renderTitle(title) {
|
46 | // function invoking is processed, but stateless is not
|
47 | return (
|
48 | <View style="render-title">
|
49 | <Text style="title-text">{title}</Text>
|
50 | </View>
|
51 | )
|
52 | }
|
53 |
|
54 | render() {
|
55 | return (
|
56 | <ScrollView>
|
57 | <View style="container">
|
58 | {this._renderTitle('Basic')}
|
59 | <Card>
|
60 | <CardTitle>
|
61 | <Text style={["title"]}>Card Title</Text>
|
62 | </CardTitle>
|
63 | </Card>
|
64 | </View>
|
65 | </ScrollView>
|
66 | )
|
67 | }
|
68 | }
|
69 | ```
|
70 |
|
71 | ## How to use it
|
72 |
|
73 | #### Install things
|
74 | ```bash
|
75 | # enter the root directory of the project
|
76 | npm i -S rn-less
|
77 | cp -i node_modules/rn-less/example/gulpfile.js .
|
78 | npm i -g gulp
|
79 |
|
80 | ```
|
81 | #### Modify the gulpfile.js
|
82 | ```javascript
|
83 | // change it to your source folder
|
84 | const sourceDir='./app';
|
85 | ```
|
86 | #### Notice
|
87 |
|
88 | All the styles in a component with the same className would be combined into a single one. It ignores the hierarchy of the less file. The hierarchy in the less file is just for you, not for rn-less.
|
89 |
|
90 |
|
91 | #### Run the gulp
|
92 | ```bash
|
93 | gulp
|
94 | ```
|
95 | #### Create your less file and import it in a js/jsx file
|
96 |
|
97 | ```javascript
|
98 | import { rnLess } from 'rn-less/src/runtime';// import the decorator
|
99 | import style from './a.less.js'; // import the style
|
100 |
|
101 | const rootStyle = style({containerMargin,bgColor});// pass your arguments and get the style object
|
102 |
|
103 | //decorate the component with the style
|
104 | @rnLess(rootStyle.CardExampleStyle)
|
105 | class CardExample extends Component {}
|
106 | ```
|
107 |
|
108 | ## What's more
|
109 |
|
110 | #### Process the less output
|
111 |
|
112 | ```javascript
|
113 | code = processStyleobject({
|
114 | code,
|
115 | hierarchy: false,
|
116 | custom: function ({
|
117 | root,
|
118 | traverseProperty,
|
119 | traverseStyle,
|
120 | traverseChunk
|
121 | }) {
|
122 | // font-size:10 -> fontSize:Theme.font10
|
123 | traverseProperty(root, function ({ value, property, selector }) {
|
124 | if (property === 'fontSize') {
|
125 | return `Theme.font${value}`;
|
126 | }
|
127 | });
|
128 |
|
129 | // sort the keys
|
130 | traverseStyle(root, function ({ style, selector, chunk, component }) {
|
131 | const ret = {};
|
132 | Object.keys(style).sort().forEach((key) => {
|
133 | ret[key] = style[key];
|
134 | });
|
135 | return ret;
|
136 | });
|
137 |
|
138 | //print the chunks
|
139 | traverseChunk(root, function ({ chunk, styleName, component }) {
|
140 | console.log(chunk);
|
141 | });
|
142 | }
|
143 | });
|
144 | ```
|
145 |
|
146 | #### Enjoy the vscode extension
|
147 |
|
148 | [https://github.com/blackmiaool/rn-less-helper](https://github.com/blackmiaool/rn-less-helper)
|
149 | <p align="center">
|
150 | <img width="600" src="https://raw.githubusercontent.com/blackmiaool/rn-less-helper/master/function.gif">
|
151 | </p>
|