为什么 Text 元素在 View 中不垂直居中？

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

为什么 Text 元素在 View 中不垂直居中？

Why Text element doesn't center vertically inside View?

text

vertical-alignment

reactjs

react-native