Invariant Violation:The navigation prop is missing for this navigator,In react-navigation 3 you must

最新推荐文章于 2021-05-14 15:43:48 发布

原创最新推荐文章于 2021-05-14 15:43:48 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

React Native错误集专栏收录该内容

20 篇文章

订阅专栏

本文详细解析了在React Navigation 3.x中正确使用导航器的方法，避免了直接暴露给React组件的常见错误。通过示例展示了如何使用createBottomTabNavigator创建底部标签导航，并强调了使用createAppContainer包裹导航器组件的重要性。

在react navigation3.x中，导航器是不能直接暴露给react组件的，比如我的错误就是

 _tabNavigator() {
        return (
            createBottomTabNavigator({
                WorkPage: {
                    screen: WorkPage
                },
                ChartPage: {
                    screen: ChartPage
                },
                AppletPage: {
                    screen: AppletPage,
                },
                MinePage: {
                    screen: MinePage,
                },
            }));
    }
    render() {
        const Tab = this._tabNavigator();//这种写法在react navigation3.x中是错误的，
        return (
            <Tab/>
        );
    }

正确的写法应该是将this._tabNavigator所返回的导航器组件用createAppContainer（）方法包裹一下如下