Text of View не выравнивается по вертикали в React Native

Question

Я новичок в React Native. Я пытаюсь понять, как работает flexbox в RN. Учитывая мой компонент приложения, я хочу поместить текст в центр (как вертикально, так и горизонтально).

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;

Но я получаю:

Я совершенно не понимаю, почему мой изгиб не растягивается по вертикали, он должен быть автоматическим c или нет?

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>
    );}}