Discussion on React-Native style management scheme

StyleSheet API

• hairlineWidth

Constant that defines the most granular width on the currently running device platform, but in fact 1/pixelratio get () Gets the constant.

• flatten

A style object that finds a style sheet corresponding to an ID by ID.

• absoluteFillObject

It is actually equivalent to {position: “absolute”, left: 0, right: 0, Top: 0, bottom: 0}

• absoluteFill

Of course, it is also equivalent to StyleSheet.create({test:{…StyleSheet.absoluteFillObject}}).test

Stylesheet problem

Stylesheet only supports style={[stylesheet. Create ({test: {flex: 1}}). Test]}, but cannot support style={{… Stylesheet. Create ({test: {flex: 1}}). Test}, essentially StyleSheet.create({test:{flex:1}}).test. The type of test is only [object number].

In its official document, “performance” here has a line of text:

It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

Of course, from the performance to the point of view, since react-native design stylesheet the most fundamental purpose is to document the reference: Create a style sheet, and then use the ID to reference the style, reduce the frequent creation of new style objects.

But a single-level reference style object, I think the performance meaning of such a style sheet is much lower than the usability and extensibility of its design.

React-Native Style Management Requirements

1. Theme Management
2. Blend Style Precedence
3. Style’s Namespaces
4. Style inheritance
5. Property Collection

Some of the more prominent solutions that can be found on the GitHub are:

1. styled-components (Web CSS Enhancer)
2. react-native-css (Web CSS Converter)
3. react-native-style-tachyons(preset style layout)
4. css-to-react-native(also a web CSS converter)

…

There are probably some preprocessor, and there’s no complete solution.

Exploring React-Native Style management solutions

1. Custom Inheritance Rules
2. Style’s Namespaces
3. Global variables
4. Style variable inheritance
5. Style object inheritance
6. Style Property Collection

Pseudo code solution, presumably:

Styles = cssTree(GlobalStyle)(Middleware)(Style);

GlobalStyle for global theme configuration.

Middleware for custom-inherited middleware.

Style is the stylesheet within the component.

So I’m trying to write a project that can implement these features:

react-native-css-tree

It solves the top five of the six-point feature just mentioned. cssTree(GlobalStyle)(Middleware) is encapsulated as a public theme module, and all inheritance and namespaces are fully implemented.

Use examples:

import cssTree from ‘react-native-css-tree’;

export default class example extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.container.welcome}></Text>
<Text style={styles.container.instructions}></Text>
<Text style={styles.container.instructions}></Text>
</View>
);
}
}

const style = {
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: “$.mainColor”,
welcome: {
fontSize: “$.fontSize”,
textAlign: ‘$.alignItems’,
margin: “$.grid”,
},
instructions: {
textAlign: ‘$.alignItems’,
color: ‘$.textColor’,
},
},
};

const styles = cssTree({
mainColor: ‘#00d1ff’,
otherColor: ‘#fff’,
textColor: “#333333”,
fontSize: 20,
backgroundColor: “red”,
grid: 10,
})(function (key, parent, sub) {
if(key===”welcome”) sub.color = parent.otherColor;
return sub
})(style);

PS. The following will improve the function: margin/padding/border/shadow/radius … and other related style collection properties.