覆盖本地风格

Question

我想覆盖React Native.ike-我创建了一种 CircleShapeView

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

我想更改backgroundColor，当我是这种样式时。这样的事情。

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

什么是正确的方法？

Answer 1

要覆盖背景彩色，您可以做到这一点：

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

更灵活的覆盖方式是将附加样式道具传递给子组件。

您会这样称呼您的子配件：

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

将经过的样式应用于您的图像：

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

Answer 2

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

示例：这样做：

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

不是这个：

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

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