如何使用 flexbox 将项目左右对齐

Question

如何将 2 个 touchableOpacity 组件分别左右对齐？这是目前的样子：

我的代码如下所示：

<View style={{ flex: 1, 
        alignItems: 'flex-start', 
        justifyContent: 'center',
        paddingLeft: 30}}>
//Other components are here

  <View style={{flexDirection: 'row', justifyContent:'space-between'}}>
                <TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}>
                    <View>
                        <Text style={{color: 'white'}}>Submit</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{width: 100, height: 50, backgroundColor: 'gray', alignItems: 'center', justifyContent: 'center'}}>
                    <View>
                        <Text style={{color: 'white'}}>Cancel</Text>
                    </View>
                </TouchableOpacity>
            </View>
</View>

Answer 1

在第二个视图中给出 flex 1

<View style={{flex: 1, flexDirection: 'row', justifyContent:'space-between'

Answer 2

为您的视图添加宽度（因为 flex-start 搞砸了）可能会成功：

<View style={{flexDirection: 'row', justifyContent:'space-between', width:"100%"}}>

如何使用 flexbox 将项目左右对齐

How to justify items to left and right using flexbox

flexbox

react-native