[英]override react native style
I want to override some sub-component of style in react native.like - I have created an style CircleShapeView
我想在react native.like中覆盖样式的某些子组件-我创建了一个样式
CircleShapeView
const styles = StyleSheet.create({
CircleShapeView: {
width: 50,
height: 50,
borderRadius: 50/2,
backgroundColor: '#000'
},
});
I want change backgroundColor
,when i am usins this style. 当我使用此样式时,我想更改
backgroundColor
。 some thing like this. 这样的事情。
<Image
style={backgroundColor: "#fff", styles.CircleShapeView}
...
/>
What is right way to do it? 正确的做法是什么?
To override the backgroundColor, you could just do this: 要覆盖backgroundColor,您可以这样做:
<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}
...
/>
A more flexible way of overriding style would be to pass an additional style prop to your subcomponent. 覆盖样式的一种更灵活的方法是将一个附加的样式支持传递给子组件。
You would call your subcomponent like that: 您将这样调用子组件:
<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />
Apply passed style to your image: 将传递的样式应用于您的图片:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
To add to the other answers here, make sure that you are specifying the inherited props style AFTER the style on the component you are trying to override. 要在此处添加其他答案,请确保在尝试覆盖的组件上的样式之后指定继承的道具样式。
Example: Do this: 示例:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
Not this: 不是这个:
<Image
style={[ this.props.passedStyle, styles.CircleShapeView ]}
...
/>
The second example will NOT override the style on the component. 第二个示例不会覆盖组件上的样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.