React Native中Flex布局未作用于Banner组件元素求助

react-native-paper的Banner组件自带内部布局结构，直接给Banner设置flex相关样式不会作用到子Text元素上，导致你设置width:33%也没有效果。

解决方法是在Banner内部嵌套一个View作为容器，将flex布局规则应用到这个View上：

<Banner
  visible={true}
  style={{
    width: '100%',
    backgroundColor: 'green',
  }}>
  <View style={{
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  }}>
    <Text style={{ width: '33%', textAlign: 'center' }} variant="bodyMedium">
      item 1
    </Text>
    <Text style={{ width: '33%', textAlign: 'center' }} variant="bodyMedium">
      item 2
    </Text>
    <Text style={{ width: '33%', textAlign: 'center' }} variant="bodyMedium">
      item 3
    </Text>
  </View>
</Banner>

说明： #

• 嵌套View作为内容容器，确保flex布局规则能正确作用到子元素
• 给Text设置textAlign: 'center'可以让文字在33%宽度内居中显示，优化视觉效果
• 如果你的react-native-paper版本支持，也可以尝试使用Banner的contentContainerStyle属性直接设置内部容器样式，替代嵌套View的方式

内容的提问来源于stack exchange，提问作者d-_-b