React Native-两个项目：一个在左边，一个在中间

Question

我一直在努力在以下位置对齐两个项目：第一个应位于行的左侧，第二个元素应位于行的中心。

下面的代码未完全将第二个元素居中：

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

            <View style={{ paddingLeft: 10 }}>
                <Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
            </View>
            <View style={{paddingRight: 10 }}>
            <Text>
                CENTER
            </Text>
            </View>
            {/* Empty view so that space-between works? */}
            <View
                style={{paddingRight: 10 }}>
            </View>
 </View>

这是我最想要的结果。但是，它不能解决问题。有谁知道成功实现此目标的最佳方法？

Answer 1

您需要添加flex: 1到父视图和子视图（flex: 1如果所有子视图都具有相同的大小，则所有子视图都将具有，否则，分别为每个子视图定义宽度/弯曲度）。

尝试这个：

      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
        <View style={{ flex: 1, paddingLeft: 10 }}>
          <Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
        </View>
        <View style={{ flex: 1, paddingRight: 10 }}>
          <Text style={{ textAlign:'center' }}>CENTER</Text>
        </View>
        <View
          style={{ flex: 1, paddingRight: 10 }}>
        </View>
      </View>

已添加style={{ textAlign:'center' }}到“中心视图”子级的“文本”中，使您可以了解其居中位置。您可以修改/删除它。

Answer 2

当我学习 Android 时，有人告诉我不要使用太多“层”组件。在这种理念下，​​我决定对'absolute'左元素使用属性来实现更简单的结果。在这个方案中，“左”项几乎粘在左墙上。

<View
    style={{
        height: 50,
        flexDirection: 'row', // a must
        alignItems: 'center', // to make items center vertically.
        justifyContent: 'center' // to make the second item center horizontally.
    }}
>
    <MaterialIcons
        style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
        name='arrow-back'
        onPress={() => {
            navigation.goBack();
        }}
    />
    <Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>