如何使用 flexbox 左右对齐项目答案

【问题标题】：How to justify items to left and right using flexbox如何使用 flexbox 左右对齐项目
【发布时间】：2022-02-02 23:46:43
【问题描述】：

如何将 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>

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

为您的视图添加宽度（因为 flex-start 搞砸了）可能会起到作用：

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

【讨论】：

【解决方案2】：

在第二个视图中给出 flex 1

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

【讨论】：

不起作用。此外，它占用了一切。