如何在react native中同时从外部设计多个组件的样式

Question

首先，这就是我试图实现的目标：

树卡，具有不同的背景颜色和不同的文本颜色。

我已经创建了第一张卡片，并考虑将其用作基础。这就是代码：

const screenWidth=Dimensions.get("window"(.width

const Testemonial1=(props(=>｛

return (
<Card style={{ ...styles.card1, ...props.style }}>
<View style={{...styles.messageContainer, ...props.style }}>
<Image style={styles.image} source={props.source} />
<View style = {{...styles.textContainer, ...props.style }}>
<BFwBasicText style={{...styles.text, ...props.style }}>{props.message}</BFwBasicText>
<Subtitle style={{...styles.subtitle, ...props.style }}>{props.name}</Subtitle>
</View>
</View>
</Card>
)

}

const styles = StyleSheet.create({
card1: {
backgroundColor: Colors.BFOrange,
marginVertical: "2%",
width: screenWidth > 600 ? "70%" : "80%",
marginHorizontal: screenWidth > 600 ? "10%" : "5%",
alignSelf: "flex-start"
},
messageContainer: {
flexDirection: "row",
alignItems: "center"
},
image: {
borderRadius: 100,
width: screenWidth < 350 ? 70 : screenWidth > 500 ? 110 : 80,
height: screenWidth < 350 ? 70 : screenWidth > 500 ? 110 : 80,
overflow: "hidden",
marginLeft: screenWidth > 600 ? "3%" : 0,
},
textContainer:{
width: "95%"
},
text: {
marginTop: "3%",
width: "75%",
overflow: "hidden",
},
subtitle: {
fontSize: screenWidth < 350 ? 18 : screenWidth > 600 ? 32 : 20,
marginLeft: "5%"
},

})

这是第三张卡的代码(它应该只改变颜色，但保持尺寸(：

import Testemonial1 from './Testemonial1'

const Testemonial3=(props(=>｛

return (
<Testemonial1
source={props.source}
name={props.name}
message={props.message}
style = {{...styles.card1, ...styles.subtitle, ...styles.testemonialText}}/>
)

}

const styles=样式表.create(｛

card1: {
backgroundColor: Colors.BFYellow,
},
subtitle: {
color: Colors.BFOrange
},
testemonialText:{
color: "white",
}

})

通过这个代码，我得到了更新的背景颜色和文本颜色。

然而；副标题"；应该是橙色的样式得到了与"橙色"相同的颜色；testemonialText"；尽管背景颜色发生了变化，但措施似乎也在变化，尽管不应该。

这就是我得到的结果：

第三张卡片不尊重来自外部的样式

有人知道我做错了什么吗？

我已经为此损失了2天时间，除了复制"；Testemonial3〃；只调整我需要的线条，我认为这不是最好的做法。

如果有人能给我任何见解，我将不胜感激。感谢

Answer 1

您的字幕标签<Subtitle style={{...styles.subtitle, ...props.style }}>{props.name}</Subtitle>正在用props样式覆盖字幕样式。你的道具风格style = {{...styles.card1, ...styles.subtitle, ...styles.testemonialText}}用感言文本风格覆盖你的字幕风格。这就是你看到这种行为的原因。只需将<Subtitle style={{...styles.subtitle, ...props.style }}>{props.name}</Subtitle>更改为<Subtitle style={{...styles.subtitle}}>{props.name}</Subtitle>