我可以在視圖中使用兩種不同的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元素之間添加空白區域。

編輯：起初我提供了在兩個視圖之間添加en 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圍繞它包裹頭部。