Question

我使用的是ScrollView，我无法将内部View内的图标居中。

    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

<ScrollView>
...
        <View style={styles.detailRowContainer}>
          <View style={{flex: 1}}>
            <Text style={styles.label} numberOfLines={1}>
              {'Phone Number'}
            </Text>
            <Text style={styles.value} numberOfLines={1}>
              {phone}
            </Text>
          </View>
          <View style={styles.round}>
            <TouchableWithoutFeedback onPress={this._onPressPhone}>
              <Icon size={22} name="phone" />
            </TouchableWithoutFeedback>
          </View>
        </View>;
...
</ScrollView>



        detailRowContainer: {
            flexDirection: 'row',
            justifyContent: 'center',
            flex: 1,
            marginTop: 10,
            paddingBottom: 10,
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightGray,
        },
        label: {
            color: Colors.glofoxDark,
            marginBottom: 3,
        },
        value: {
            color: Colors.glofoxDark,
            fontWeight: '800',
            borderBottomWidth: 1,
            borderBottomColor: Colors.lightGray,
        },
        round: {
            backgroundColor: Colors.lightBlue,
            width: 30,
            height: 30,
            borderRadius: 30,
            overflow: 'hidden',
            justifyContent: 'center',
            alignItems: 'flex-end',
            flexDirection: 'row',
            padding: 4,
        },

Answer 1

需要以这种方式修改样式。

现在你正在做

flexDirection: row沿着justifyContent: center。由于您的第一个子元素正在完成父级flex ，因此它不会显示其效果
paddingBottom但是，为了居中，必须给出等效的paddingTop
padding应替换为margin，否则会影响内部元素的位置
alignItems一轮，不得为flex-end，应替换为center

以下是修复垂直居中

的样式

 detailRowContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
        marginTop: 10,
        paddingTop: 10,
        paddingBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: Colors.lightGray,
    },

 round: {
        backgroundColor: Colors.lightBlue,
        width: 30,
        height: 30,
        borderRadius: 30,
        overflow: 'hidden',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 4
    },

React Native中的垂直居中不起作用

1 个答案: