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

Question

我想要一个带有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放置视图？

Answer 1

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

编辑：起初我提议在两个视图之间添加带有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围绕它。