Style react-native with less.
Powered by react-native-css and less.js.
rn-config{//style's config
arguments: containerMargin,bgColor;//arguments used in less
}
CardExampleStyle {
.render-title{
flex: 1;
align-items: center;
margin-top: 20;
.title-text{
font-size: 20
}
}
.container {
flex: 1;
margin-top: containerMargin;// use the variable declared above
margin-bottom: "containerMargin";// use the variable with string
.title {
font-size: "containerMargin/2";// and any expression starts with variable name
background-color: bgColor;
}
}
}import { rnLess } from 'rn-less/src/runtime';// import the decorator
import style from './a.less.js'; // import the style
const rootStyle = style({containerMargin,bgColor});// pass your arguments and get the style object
//decorate the component with the style
//write the decorator in this a.b way to let the vscode extention track the style
@rnLess(rootStyle.CardExampleStyle)
class CardExample extends Component {
//the strings in the style attribute are the class names in the less file
_renderTitle(title) {
// function invoking is processed, but stateless is not
return (
<View style="render-title">
<Text style="title-text">{title}</Text>
</View>
)
}
render() {
return (
<ScrollView>
<View style="container">
{this._renderTitle('Basic')}
<Card>
<CardTitle>
<Text style={["title"]}>Card Title</Text>
</CardTitle>
</Card>
</View>
</ScrollView>
)
}
}# enter the root directory of the project
npm i -S rn-less
cp -i node_modules/rn-less/example/gulpfile.js .
npm i -g gulp
// change it to your source folder
const sourceDir='./app';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.
gulpimport { rnLess } from 'rn-less/src/runtime';// import the decorator
import style from './a.less.js'; // import the style
const rootStyle = style({containerMargin,bgColor});// pass your arguments and get the style object
//decorate the component with the style
@rnLess(rootStyle.CardExampleStyle)
class CardExample extends Component {}code = processStyleobject({
code,
hierarchy: false,
custom: function ({
root,
traverseProperty,
traverseStyle,
traverseChunk
}) {
// font-size:10 -> fontSize:Theme.font10
traverseProperty(root, function ({ value, property, selector }) {
if (property === 'fontSize') {
return `Theme.font${value}`;
}
});
// sort the keys
traverseStyle(root, function ({ style, selector, chunk, component }) {
const ret = {};
Object.keys(style).sort().forEach((key) => {
ret[key] = style[key];
});
return ret;
});
//print the chunks
traverseChunk(root, function ({ chunk, styleName, component }) {
console.log(chunk);
});
}
});