css - 覆盖 react 原生样式

Question

我想在 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}                   
...
/>  

什么是正确的方法？

Answer 1

要覆盖 backgroundColor，你可以这样做:

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

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

你会像这样调用你的子组件:

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

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

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