React Native - 两个项目:一个在左边,一个在中心

时间:2018-03-23 04:38:06

标签: react-native flexbox alignment center

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

以下代码并未完全体现我的第二个元素:

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

这是我能得到的最接近我想要的结果。但是,它没有做到这一点。谁能知道成功实施这个的最佳方法吗?

3 个答案:

答案 0 :(得分:9)

您需要将flex: 1添加到父视图和子视图(如果您希望所有子视图具有相同大小,则所有子视图都将flex: 1,否则为每个子视图单独定义width / flex)

试试这个:

      <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' }}添加到中心视图子项中的文本,以便了解其居中位置。您可以修改/删除它。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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