Question

当我对包含react-navigation组件的父元素View使用样式属性alignItems：“ center”时，会向我显示空白屏幕

但是如果没有此属性，一切都会很好，只是内容不会居中

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

如果使用alignItems：“ center”，为什么react-navigation元素不显示？

1 个答案: