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

textAlign在 textWithInContainer 内没有被应用。如果我添加 textAlign: 'center'至 styles.text给了我想要的风格，但它被用于不同的屏幕，我只希望它在 screenFile 中居中.我想要 styles.textWithinContainer 的样式覆盖 styles.text 中的样式.我该怎么办？

Answer 1

您没有将传递的样式委托(delegate)给 TextFile到实际Text TextFile 中的元素.您可以做的是通过传递一组样式对象来应用样式，从而将样式添加在一起:

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

来自 the React Native documentation :

You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

因此，如果您通过 textAlign在 textWithContainer ，它将应用于 Text组件，它可以在没有 textAlign 的情况下随意重复使用.