在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

您没有将传递给的样式委托TextFile给实际的Text元素TextFile.你可以做的是通过传递样式对象数组来将样式添加到一起来应用它:

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

从React Native文档:

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

因此,如果传递textAlign的textWithContainer,它会在应用Text组件,并且你希望它可以重复使用而不会 textAlign.