React Native - 两项：一项在左侧，一项在中心

Posted 2023-03-07

【中文标题】React Native - 两项：一项在左侧，一项在中心

【英文标题】：React Native - two items: one on the left, one in the center

【发布时间】：2018-09-01 16:54:48

【问题描述】：

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

下面的代码没有完全居中我的第二个元素：

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

这是我能得到的最接近我想要的结果。但是，它并不能解决问题。任何人都知道成功实施这一点的最佳方法吗？

【参考方案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' 添加到中心视图子中的文本，让您了解其居中位置。您可以修改/删除它。

【参考方案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>

【讨论】：

这样的问题是，如果文本很长，它可能会与绝对位置项重叠。

@JeffPadgett 对，我同意...如果发生这种情况，可能需要额外的代码。

【参考方案3】：

  <View style=flex:1, flexDirection: 'row', justifyContent: 'space-around'>
        <View style=width: 50, height: 50>
            <Text style= fontSize: 20, color: 'red', fontWeight: '200' >LEFT_ELEM</Text>
        </View>
        <View style= width: 50, height: 50>
            <Text>CENTER</Text>
        </View>
        <View style= width: 50, height: 50/>
 </View>