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

Question

我使用 aScrollView并且我无法将图标放在一个内部的Views 中。

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