React Native Style

React native does not implement CSS but relies on JavaScript to set the style of your app, which is a controversial decision that you can read about the fundamentals behind the slides.

  Declaration style:

1 var styles = StyleSheet.create ({
 2 base: {
 3 width: 38,
 4 height: 38,
 5},
 6 background: {
 7 backgroundColor: ‘# 222222’,
 8   },
 9 active: {
10 borderWidth: 2,
11 borderColor: ‘# 00ff00’,
12},
13});
StyleSheet.create creation is optional but it provides some key advantages. It guarantees that the value is immutable and opaque by changing the value to a common number that refers to an internal table. Put it at the end of the file, you can make sure they are created only once and not rendered every time.

All of these attribute names and values are just a subset of the work in the network. For layout, React Native implements Flexbox.

 

Use style:

All core components accept style attributes <Reference the style attributes created by the above code>

1 <Text style = {styles.base} />
2 <View style = {styles.background} />


They also accept a set of styles

1 <View style = {[styles.base, styles.background]} />


Behavior is similar to Object.assign: in case of value conflict, the value of the rightmost element will take precedence and values such as false, undefined, and null will be ignored. The usual approach is to add some styles conditionally based on certain conditions.

1 <View style = {[styles.base, this.state.active && styles.active]} />
 

Finally, if you really need it, you can create style objects in the rendering, but it is not recommended to do so, and finally put them in the array definition.

1 <View
2 style = {[styles.base, {
3 width: this.state.width,
4 height: this.state.width * this.state.aspectRatio
5}]}
6 />
 

Style transfer:

In order to customize the style of your subcomponents, you can pass the style. Use View.propTypes.style and Text.propTypes.style to ensure that only styles are passed.

 1 var List = React.createClass ({
 2 propTypes: {===> guarantee only styles are passed
 3 style: View.propTypes.style,
 4 elementStyle: View.propTypes.style,
 5},
 6 render: function () {
 7 return (
 8 <View style = {this.props.style}>
 9 {elements.map ((element) =>
10 <View style = {[styles.element, this.props.elementStyle]} />
11)}
12 </ View>
13);
14}
15});
16
17 // ... in another file ...
18 <List style = {styles.list} elementStyle = {styles.listElement} /> ===> Pass style to List
 

In general, there is not much syntax in the style above, mainly look at the style support of View, Image, Text, Flexbox, Transform.

React Native Style