我可以在一个视图中使用两个不同的 flexDirection 吗？

【问题标题】：Can i use two different flexDirection in a view?我可以在一个视图中使用两个不同的 flexDirection 吗？
【发布时间】：2016-09-06 01:47:45
【问题描述】：

我想要一个像这样的带有 3 个按钮的视图：

所以我有这个代码：

<View>
  <View style={{ flexDirection: 'column', alignItems: 'flex-end' }}>
    <CircleButton>
    </CircleButton>
  </View>
  <View style={{ margin: 16, alignItems: 'flex-end', flexDirection: 'row', justifyContent: 'space-between' }}>
    <Button>
      Annulla
    </Button>
    <Button>
      Conferma
    </Button>
  </View>
</View>

但是结果是这样的：

如何使用两个不同的 flexDirection 放置视图？

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

您想在两个 View 元素之间添加空格。

编辑：起初我提出在两个视图之间添加 en empty View 和 flex-grow: 1，但我认为以下更优雅。

以第二个例子in the docs 为例，我认为这可以解决问题 - 你可以试试吗？

<View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between'
  }}>
  <View style={{ alignSelf: 'flex-end' }}>
    <CircleButton>
    </CircleButton>
  </View>
  <View style={{ margin: 16, width: '100%', flexDirection: 'row', justifyContent: 'space-between' }}>
    <Button>
      Annulla
    </Button>
    <Button>
      Conferma
    </Button>
  </View>
</View>

总的来说，您似乎还没有正确掌握 Flexbox。我强烈推荐this guide 绕着它转。

【讨论】：