react-native - 尽管样式表中的样式，但文本未居中

Question

我正在尝试使用 React Navigation 制作一个基本的选项卡应用程序，所以我有三个纯文本页面。它们垂直居中但不在选项卡上水平居中。这是将 alignContent 和 justifyContent 结合使用（过去对我有用）。

起初我怀疑弯曲只是垂直弯曲，所以我应用了对比色。但是，它似乎跨越了选项卡。我也尝试过 textAlign，但两种情况似乎都不起作用。

这是其中一个屏幕的示例：

export class ExampleScreen extends Component {
    render() {
        return(
            <View style={styles.container}>
                <Text>Example!</Text>
            </View>
        )
    }
}

这是样式表：

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
        alignContent: 'center',
        justifyContent: 'center'
    }
})

没有错误消息。但是我希望文本水平居中，但我得到的是：

标签： react-nativeformatreact-navigation

Answer 1

您的文本不是水平居中的，因为文本占据了屏幕的整个宽度，您需要在文本中居中内容

<Text style={{ textAlign: 'center' }}>Example!</Text>