【问题标题】:Why do I get a blank screen after using Drawer-Navigator in React-Native to navigate to another Navigator?为什么在 React-Native 中使用 Drawer-Navigator 导航到另一个 Navigator 后出现空白屏幕?
【发布时间】:2020-04-21 17:06:24
【问题描述】:

编辑小吃: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】:

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

    【讨论】:

    • 我也只在 android 设备上遇到过这个问题,但在 iOS 上没问题。当我从抽屉中的一个屏幕移动到另一个屏幕时,它显示白屏。请帮助我
    • 只需按主页按钮进入主屏幕并返回到expo应用程序,它将按预期工作。
    • 感谢您的回复。但是我得到了解决方案,我在 App.js 文件的顶部启用了 enableScreen() 我刚刚删除了该功能并且它起作用了
    猜你喜欢
    • 1970-01-01
    • 2016-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-21
    相关资源
    最近更新 更多