为什么在React-Native中使用Drawer-Navigator导航到另一个导航器后出现空白屏幕?

问题描述 投票:2回答:1

编辑小吃:https://snack.expo.io/rJfyQLhJ8我正在学习使用一些过时的课程材料来响应本地语言。发生了一些重大变化,我正在尝试解决问题。这是我的主要组件,其中包含一些导航器。菜单导航器:

const MenuNavigator = createStackNavigator(
{
    Menu: { screen: Menu },
    Dishdetail: { screen: Dishdetail }
},
{
    initialRouteName: 'Menu',
    defaultNavigationOptions: {
        flex: 1,
        headerStyle: {
            backgroundColor: '#512DA8',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
})  

家庭导航器

const HomeNavigator = createStackNavigator(
{
    Home: { screen: Home }
},
{
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
})  

最后是MainNavigator

const MainNavigator = createDrawerNavigator(
{
    Home:
    {
        screen: HomeNavigator,
        navigationOptions: {
            title: 'Home',
            drawerLabel: 'Home'
        }
    },
    Menu:
    {
        screen: MenuNavigator,
        navigationOptions: {
            title: 'Menu',
            drawerLabel: 'Menu'
        },
    }
},
{
    drawerBackgroundColor: '#D1C4E9'
});  

之后,我将其包装在createAppContainer中,并在render方法中使用它。

const App = createAppContainer(MainNavigator);
class Main extends Component { 
render() {
    return (
        <View style={{ flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
            <App />
        </View>
    );
}}

该应用程序构建成功,我可以访问侧面抽屉,但是当我单击菜单项时,它可以导航而不会引发错误,但是显示空白白屏。如果我导航回到主屏幕,它将正确显示它,但是它将显示空白屏幕,而不是菜单屏幕/组件。为什么是这样 ?我正在使用OnePlus5t。

react-native react-native-android react-navigation react-navigation-stack react-navigation-drawer
1个回答
0
投票

可能是一个错误。在您使用android home UI按钮导航到主屏幕并返回到应用程序后,它可以工作。从那时起似乎工作正常。

© www.soinside.com 2019 - 2024. All rights reserved.