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',
}

textAlign中的{p> textWithInContainer未被应用。如果我向textAlign: 'center'添加styles.text给了我想要的风格，但它在不同的屏幕中使用，我只希望它以screenFile为中心。我希望styles.textWithinContainer中的样式覆盖styles.text中的样式。我该怎么做呢？

Answer 1

您并未将传递给[-1:2]的样式委派给TextFile中的实际Text元素。您可以做的是通过传递样式对象的数组来将样式添加到一起来应用它：

TextFile

来自the React Native documentation：

您还可以传递一组样式 - 数组中的最后一个样式具有优先权，因此您可以使用它来继承样式。

因此，如果您在<Text style={[styles.text, props.style]}> This is a line of text and this might be a second line </Text>中传递textAlign，则会将其应用于textWithContainer组件，并且可以根据您的意愿重复使用而不用 Text。

Answer 2

在我最初的TextFile中，我将style作为参数传递，并且在styles数组中，只使用style作为数组中的第二项。

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

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

谢谢你@ Li357！

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

2 个答案: