视图文本在 React Native 中没有垂直对齐

Question

我是 React Native 的新手。我试图了解 flexbox 在 RN 中的工作原理。鉴于我的 App 组件，我想将文本放在中心（垂直和水平）。

import React, {Component} from 'react';
import Colors from './src/assets/Colors';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
} from 'react-native';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showSplashScreen: true,
        };
    }

    render() {
        let showSplashScreen = this.state.showSplashScreen;
        return (
            <View style={styles.appBackground}>
                <SafeAreaView style={{flex:1}}>
                    {showSplashScreen && (<SplashScreen/>)}
                </SafeAreaView>
            </View>
        );
    }
}

class SplashScreen extends Component {
    render() {
        return (
            <View styles={{flex:1, backgroundColor: '#954876'}}>
                <Text style={styles.splashScreenText}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    appBackground: {
        height: '100%',
        flex:1,
        backgroundColor: Colors.customerGreen,
    },
    splashScreenText: {
        color: Colors.white,
        textAlign: 'center',
        textAlignVertical: 'bottom',
    },
});

export default App;

但我得到的是：

我完全不清楚为什么我的 flex 不能垂直拉伸，它应该是自动的，还是不是？

Answer 1

请试试这个。

class SplashScreen extends Component {
render() {
    return (
        <View styles={{flex:1, backgroundColor: '#954876', justifyContent:'center', alignItems:'center'}}>
            <Text style={styles.splashScreenText}>Hello World!</Text>
        </View>
    );}}