反应本机样式问题。不变违反

Question

在反应原生中，我正在使用以下样式设置组件的样式

const style = StyleSheet.create({
    height: 100,
    borderBottomWidth: 1,
    borderBottomColor: "rgb(201, 204, 204)"
})

但是它给出了错误：

看来borderBottomColor是有效的属性。我找不到错误的原因。

如果直接添加样式。也就是说，如果没有StyleSheet.create，一切都将完美运行，样式也将得到应用

const style = {
    height: 100,
    borderBottomWidth: 1,
    borderBottomColor: "rgb(201, 204, 204)"
}

建议直接在react native中使用样式吗？

Answer 1

您对StyleSheet.create的使用不太正确。试试：

const styles = StyleSheet.create({
    foo : {
        height: 100,
        borderBottomWidth: 1,
        borderBottomColor: "rgb(201, 204, 204)"
    }

})

然后将其引用为styles.foo，如下所示：

<View style={styles.foo} />

您还可以像这样将样式表和嵌入式样式组合在一起：

<View style={[styles.foo,{backgroundColor:'green'}]}/>

最后，样式表可以具有多种命名样式，例如：

const styles = StyleSheet.create({
    foo : {
        height: 100,
        borderBottomWidth: 1,
        borderBottomColor: "rgb(201, 204, 204)"
    },
    bar : {
        width:50
    }

})