基于React Native中的父组件传递样式

Question

我有一个通过样式的 <Text>组件。

TextFile.js：

<Text style={styles.text}> 
  This is a line of text and this might be a second line 
</Text>

screenFile.js：

<View style={styles.viewContainer}>
    <TextFile style={styles.textWithinContainer}>
</View>

textFiles/styles.js：

text: {
    fontSize: 20,
    color: 'black',
    fontWeight: '400',
}

screenFiles/styles.js：

textWithinContainer: {
    textAlign: 'center',
}

textWithInContainer中的textAlign没有应用。如果我将textAlign: 'center'添加到styles.text中，请给我我想要的样式，但它在不同的屏幕中使用，我只希望将其集中在screenFile中。我希望styles.textWithinContainer的样式覆盖styles.text中的样式。我将如何处理？

Answer 1

您没有将您传递给TextFile的样式委派给TextFile中的实际Text元素。您可以做的就是通过将样式对象的 array 添加在一起以应用它：

<Text style={[styles.text, props.style]}> 
  This is a line of text and this might be a second line 
</Text>

来自React本地文档：

您也可以通过一系列样式 - 数组中的最后样式具有优先权，因此您可以使用它来继承样式。

因此，如果您在textWithContainer中通过textAlign，它将在Text组件中应用，并且可以按照您的意愿重复使用，没有 textAlign。

Answer 2

在我的初始文本文件中，我将style作为参数传递，在styles数组中，仅将style用作数组中的第二个项目。

const TextFile = ({ text, style }) => (
   <Text style=([styles.text, style])> {text} </Text>
);

每当使用TextFile时，它将应用该组件中给出的任何样式，并且/或默认为styles.text中给出的初始样式。

谢谢 @li357！