React Native Style

Posted 2020-06-14

　　

　　React Native不实现CSS而是依赖javascript来设置你的应用的样式，这是一个有争议的决定，你可以阅读这些幻灯片了解其背后的基本原理。

　　

　　申明样式：

 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 创建是可选的但是它提供了一些关键优势。 它通过转变值为引用内部表的普通数字来保证值是不可变且不透明的。把它放在文件的末尾, 你能确保它们只被创建一次并且不是每次都被渲染。

　　所有的这些属性名和值都只是工作在网络中的一个子集。对于布局，React Native执行 Flexbox。

 

　　使用样式：

　　所有的核心组件接受样式属性 <引用上面代码创建的样式属性>

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

　　

　　它们也接受一组样式 <注意用数组包起来>

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

　　

　　行为与Object.assign类似：以防值冲突，这最右边元素的值将会优先而比如false、undefined和null等值将会被忽略。 通常的做法是在基于某些条件有条件的添加一些样式。

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

 

　　最后，如果你真的需要，你可以在渲染中创建样式对象，但是不推荐这么做，最后把它们放到数组定义中。

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

 

　　样式传递：

　　为了定制你的子组件的样式，你可以通过样式传递。使用View.propTypes.style 和 Text.propTypes.style确保仅仅样式被传递。

 1 var List = React.createClass({
 2   propTypes: {                        ===> 保证仅传递样式
 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} />  ===> 传递样式到List

 

　　总的来说，样式上面的语法不多，主要多看看View, Image, Text, Flexbox, Transform的样式支持。