在React-Native中,您可以使用Stylesheet创建类似css的样式表。使用
stylesheet.create
而不是纯js对象的主要原因是提高性能。但是,您经常需要动态地为组件设置样式,通常基于它们的props。我基本上发现了三种方法来实现这一点:
以下示例请注意:将const styles ...
声明在组件外部,因为这是一种常见模式,您可能希望在不同的组件之间共享样式。将省略号以下内容视为render函数的一部分。
Using an array of styles:
const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}}) ... return <View style={[styles.viewStyle, {color: this.props.color}]} />
Using Stylesheet.flatten:
const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}}) ... const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}}) return <View style={flattenedStyle} />
Using a function to create the stylesheet:
const styles = (color) => StyleSheet.create({ viewStyle: { backgroundColor:'red', color: color } }) ... const style = styles(this.props.color).viewStyle return <View style={style} />
我想知道在性能方面哪种方法最好,或者是否有其他更高效的方法? 我认为选项2和3根本行不通,因为在属性更改时动态创建新样式表会破坏样式表的整个目的。 关于这个问题,我很乐意听取任何想法或提示!