为什么我们不能检查 react-native 应用程序的样式属性？

Question

我想检查一个元素的颜色是否为白色，如下所示，

if(styles.background=='white')
console.log("ok")

console.log(styles.background=='white') --> was false [1]

为什么 [1] 返回 false？

Answer 1

在您的情况下，样式是一个 StyleSheet 对象。

您需要使用StyleSheet.flatten函数，如下所示：

 const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

var styleObj = StyleSheet.flatten([styles.container])

console.warn(styleObj.backgroundColor==='#F5FCFF') //=>true

要处理组件的 prop 样式，您可以按如下方式使用它：

 let backgroundColor = Stylesheet.flatten(this.props.style).backgroundColor;

您可以在此处找到该函数的源代码：

https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/flattenStyle.js

来源和更多细节在这里：

https://facebook.github.io/react-native/docs/stylesheet.html

/sf/answers/2466338661/