Почему не реагирует элемент навигационной навигации при использовании alignItems: "center"?

Question

Когда я использую свойство style alignItems: "center" для родительского элемента View, который содержит компонент реагирования-навигации, он показывает пустой экран

Но без этого свойства все работает хорошо, только контент не центрируется

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import MainScreen from './screens/MainScreen';
import Main from './components/Main';

const MainNavigator = createStackNavigator(
    {
        Main: { screen: MainScreen }
    },
    { initialRouteName: 'Main' }
);

const AppNavigator = createAppContainer(MainNavigator);

export default function App() {
    return (
        <View style={styles.container}>
            <AppNavigator />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',//there is the problem
        justifyContent: 'center',
    }
});

Answer 1

Не рекомендуется использовать стиль родительского компонента для вашего AppNavigator.

Вы должны поместить все ваши стили в каждый экран вашего приложения, начните с применения их к основному контейнеру вашего представления в ./screens/MainScreen.js,

и измените функцию вашего приложения:

export default function App() {
    return (
        <AppNavigator />
    );
}