覆盖反应原生样式答案

【问题标题】：override react native style覆盖反应原生样式
【发布时间】：2018-07-27 04:31:45
【问题描述】：

我想在 react native.like 中覆盖样式的一些子组件 - 我创建了一个样式CircleShapeView

 const styles = StyleSheet.create({
      CircleShapeView: {
        width: 50,
        height: 50,
        borderRadius: 50/2,
        backgroundColor: '#000'
    },
    });

我想改变backgroundColor，当我使用这种风格时。像这样的东西。

<Image
style={backgroundColor: "#fff", styles.CircleShapeView}                   
...
/>

什么是正确的方法？

【问题讨论】：

你试过<Image style={{ ...styles.CircleShapeView, backgroundColor: "#fff" }} ... />
@Adolfo 这不起作用，下面的答案有效。

标签： css reactjs react-native stylesheet

【解决方案1】：

要覆盖背景颜色，您可以这样做：

<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}                   
...
/>

一种更灵活的覆盖样式的方法是将额外的样式道具传递给您的子组件。

你会这样调用你的子组件：

<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />

将传递的样式应用于您的图像：

<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}                   
...
/>

【讨论】：

【解决方案2】：

要在此处添加其他答案，请确保在您尝试覆盖的组件的样式之后指定继承的道具样式。

示例：这样做：

<Image
   style={[ styles.CircleShapeView, this.props.passedStyle ]}                   
   ...
/>

不是这个：

<Image
   style={[ this.props.passedStyle, styles.CircleShapeView ]}                   
   ...
/>

第二个示例不会覆盖组件上的样式。

【讨论】：