React Native Flex 项目对齐答案

【问题标题】：React Native Flex Items AlignmentReact Native Flex 项目对齐
【发布时间】：2019-12-06 17:10:00
【问题描述】：

我需要将三个项目安排在最左边的第一行中，另外两个在中间。我怎样才能做到这一点？

我已经尝试了以下方法：

<View style={{flexDirection: 'row', justifyContent: 'center'}}>
<View style={{flexDirect: 'row', justiftContent:'flex-start'}}>
<Text>item1</Text>
</View>

<View>
<Image source={calendar} style={{height: 30, width:30}} />
</View>

<View>
<Text>item2</Text>
</View>
</View>

但是这个代码中心对齐所有项目，我得到这样的东西：

     ------------------------------|
    |      item1,image,item2       |
    |                              |
    |______________________________|

我也尝试过 space-between，但它使 item2 在最右侧对齐。

     ------------------------------   
    |item1,      image,      item2 |
    |                              |
    |______________________________|

【问题讨论】：

标签： react-native flexbox

【解决方案1】：

在下文中，我为您提供解决问题的方法。顺便说一句，您的样式定义中有几个错别字。

代码：

  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', marginTop: 20}}>
  <View style={{flex: 1, flexDirection: 'row', alignItems:'flex-start'}}>
    <Text>item1</Text>
  </View>

  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
    <Image source={{uri: 'https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg'}} style={{height: 30, width:30}} />
    <Text>item2</Text>
  </View>
   <View style={{flex: 1}} />
  </View>

输出：

工作示例：

https://snack.expo.io/H1Zv59D6r

【讨论】：

对不起，我直接在编辑器中编写了代码。将样式 flex:1 应用于单个视图实际上会干扰同一屏幕上的其他视图。否则，您的解决方案可以正常工作。谢谢

【解决方案2】：

试试这个

<View style={{flexDirection: 'row'}}>
    <View style={{flexDirection: 'row',justifyContent:'space-between',width:"50%"}}>
        <View >
        <Text>item1</Text>
        </View>

        <View>
        <Image source={calendar} style={{height: 30, width:30}} />
        </View>
    </View>

    <View style={{flexDirection:'row',justifyContent:"flex-start",width:"50%"}}>
    <Text>item2</Text>
    </View>
</View>

【讨论】：