为什么文本元素不在视图内垂直居中？

Question

使用 react-native，我创建了一个自定义按钮，如下所示：

import React, {Component, Fragment} from 'react';

import globalStyles from './../../globals/styles'

import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet
} from 'react-native';

export default class MyButton extends Component {
    render() {
        return (
            <TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
                <View style={styles.textContainer}>
                    <Text style={styles.text}>{this.props.buttonText}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}

let buttonFontSize = 10;

const styles = StyleSheet.create({
        textContainer: {
            justifyContent: 'center',
            alignItems: 'center',
        },
        opacitySurface: {
            backgroundColor: globalStyles.colors.customerGreen,
            width: "25%",
            height: 60,
            padding: 10,
            borderRadius: 10,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 0 },
            shadowOpacity: 0.8,
            shadowRadius: 1.5
        },
        text: {
            textAlign: 'center',
            fontFamily: globalStyles.fonts.OpenSans,
            color: 'white',
            fontSize: buttonFontSize,
        }
    }
);

但此按钮内的文本未垂直对齐。前提：我是 react-native 的新手，我几乎可以肯定我错过了一些非常愚蠢的东西。

Answer 1

要使justifyContent 和alignItems 属性起作用，它们需要位于带有display: flex 的元素上。

使您的文本居中对齐的是属性textAlign: 'center' 在style.text

在您的style.textContainer 上使用display: 'flex' 和flex: 1

textContainer: {
    display: 'flex'
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
}

Answer 2

将 css 添加到您的 opacitySurface

display: "flex",
justifyContent: "center",
alignItems: "center"

它会让你的文字居中

Answer 3

在您的textContainer 样式中添加flex: 1：

textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
}