Question

我读过的关于为组件创建StyleSheet的每个文档示例都是在render（）之外完成的（甚至类似于组件类之外的常规变量）。这样做意味着我无法控制可以操纵所述组件样式的道具或状态更改。因此我一直在render（）方法中调用getStyles()函数，该函数在每个渲染上创建一个（新）StyleSheet。对我而言，它在性能方面听起来很昂贵，但它确实起到了作用。但是，我想知道是否有更好的方法呢？

提前致谢！

Answer 1

是的！由于性能和代码可读性，在每个渲染期间创建一个StyleSheet并不是最好的选择StyleSheet Docs。

使用array notations有一种更好的方法，基本上意味着你可以传入一个样式对象数组

例如，如果我有一个组件，它的背景颜色和文本颜色设置在这样的样式对象中：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class SomeComponent extends Component{
   render(){
       return(
         <View style={styles.root}>
             <Text>{'Hi Everybody!'}</Text>
         </View>
       );
   }
}

const styles = StyleSheet.create({
   root: {
       backgroundColor: '#000000',
       height: 400, 
       width: 300,
       color: 'white'
   }
});

您可以自定义背景颜色（或任何其他样式），如下所示：

 <View style={[styles.root, {backgroundColor: "yellow"}]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

在您的情况下，您可以传递道具值，如下所示：

 <View style={[styles.root, this.props.style]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

或来自状态对象的变量，如：

 <View style={[styles.root, this.state.style]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

数组中的后面的值将优先，所以如果我添加了另一个具有backgroundColor属性的样式对象，则将应用最后一个backgroundColor; 例如，如果我这样做：

 <View style={[styles.root, {backgroundColor: "yellow"}, {backgroundColor: "green"}]}>
    <Text>{'Hi Everybody!'}</Text>
 </View>

背景颜色为绿色。因此，您现在可以编写代码，使用StyleSheet.create({})创建的样式将包含常量的样板样式，并应用于任何自定义或仅适用于默认样式。

希望有所帮助。

每次渲染生成新StyleSheet的不良做法？

1 个答案: