反应本机Flex项目对齐

Question

我需要在最左边的第一行中排列三个项目，在中心排列另外两个项目。我该如何实现？

我已经尝试了以下方法：

<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       |
    |                              |
    |______________________________|

我也尝试过使用空格，但是它使item2在最右边。

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

Answer 1

尝试

<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>

Answer 2

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

代码：

  <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