React Native Flex不适用于元素

ldioqlga 于 2023-04-07 发布在 React

关注(0)|答案(1)|浏览(113)

我使用react-native-paper尝试使用Flex将元素居中：

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

同样奇怪的是，如果我给予子元素Text，width: 33%也没有改变。

react-native

来源：https://stackoverflow.com/questions/75950322/react-native-flex-not-applying-to-elements

1条答案

按热度按时间

5uzkadbs1#

通过将每个组件的flex属性设置为1，将使它们占据相等的空间并在组件内居中对齐。将textAlign属性设置为'center'以水平对齐每个组件内的文本。

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

赞(0）回复(0）举报 2023-04-07

我来回答

React Native Flex不适用于元素

1条答案

相关问题

热门标签

最新问答