覆蓋反應本機樣式

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 ]}                   
...
/> 

Answer 2

要在此處添加其他答案，請確保在嘗試覆蓋的組件上的樣式之后指定繼承的道具樣式。

示例：

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

不是這個：

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

第二個示例不會覆蓋組件上的樣式。