视图文本在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>
    );}}