2つの異なる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> 

をしかし、結果はこれです：どのように

私は2つの異なるflexDirectionでビューを配置できますか？

Answer 1

2つのView要素の間に空白を追加します。

編集：最初に私はflex-grow: 1と空のViewを追加するように提案しましたが、私は次の方がよりエレガントだと思います。

in the docsの2つ目の例を取ると、私はこれがトリックだと思います。

<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をお勧めします。