react-native - React Native 中的垂直居中不起作用

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。由于您的第一个子元素占用了完整的parent flex，因此它不会显示其效果
• paddingBottom 已给出，但是，为了居中，必须给出等效的 paddingTop
round样式的
• padding要替换成margin，否则会影响内部元素的位置
• alignItems in round ，不能是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
    },