美文网首页React Native实践React Native开发经验集ReactNative开发
react-navigation 嵌套 出现每个页面都能打开侧边

react-navigation 嵌套 出现每个页面都能打开侧边

作者: 素笺淡墨染流年 | 来源:发表于2018-03-11 00:41 被阅读241次

这个问题困扰了我一个多小时,尴尬。

问题是这个样子的,每个界面都能打开侧边:

问题.gif

路由代码:

const NavHome = StackNavigator({
    welcome: {
        screen: WelcomeScreen,
        navigationOptions: {
            header: null
        }

    },
    home: {
        screen: HomeScreen,
        navigationOptions: {
            header: null
        }
    },
    login: {
        screen: LoginScreen,
        navigationOptions: {
            header: null
        }
    },
    system_datail: {
        screen: SystemDetailScreen,
        navigationOptions: {
            header: null
        }
    },
    article_detail: {
        screen: ArticleDetailSceen,
        navigationOptions: {
            header: null
        }
    },
    search: {
        screen: SearchScreen,
        navigationOptions: {
            header: null
        }
    },
    search_result: {
        screen: SearchResultScreen,
        navigationOptions: {
            header: null
        }
    },
    theme: {
        screen: ThemeScreen,
        navigationOptions: {
            header: null
        }
    },
    about: {
        screen: AboutScreen,
        navigationOptions: {
            header: null
        }
    }
},{
    initialRouteName: 'welcome',
    navigationOptions: ({navigation, screenProps}) => ({
        gesturesEnabled: true,
    }),
}
)


const RootNavigator = DrawerNavigator(
    {
        home: {
            screen: NavHome,
        }
       
    },
    {
        drawerWidth: 260,
        drawerPosition: 'left',
        contentComponent: UserDrawer,
        contentOptions:{
            initialRouteName:'home'
        }
    }
)

export default RootNavigator 

百度搜索了下,没有搜索到解决方案,倒是搜到了和我一样的问题,估计是我的搜索姿势不对。
不过在一个问题的评论当中,有一个评论大概意思是说:DrawerNavigator嵌套StackNavigator是一个全局的drawer
我刚开始没有反应过来,后来找不到解决方案,就想了会,才想到这句话中的全局二字,然后就想着把它变成一个局部的不就行了。

解决如下:


const homeDrawer = DrawerNavigator(
    {
        home: {
            screen: HomeScreen, // 重点这里<--------------------------------------------------
        }
       
    },
    {
        drawerWidth: 260,
        drawerPosition: 'left',
        contentComponent: UserDrawer,
        contentOptions:{
            initialRouteName:'home'
        }
    }
)


const NavHome = StackNavigator({
    welcome: {
        screen: WelcomeScreen,
        navigationOptions: {
            header: null
        }

    },
    home: {
        screen: homeDrawer, // 还有这里 <-----------------------------------------------------------
        navigationOptions: {
            header: null
        }
    },
    login: {
        screen: LoginScreen,
        navigationOptions: {
            header: null
        }
    },
    system_datail: {
        screen: SystemDetailScreen,
        navigationOptions: {
            header: null
        }
    },
    article_detail: {
        screen: ArticleDetailSceen,
        navigationOptions: {
            header: null
        }
    },
    search: {
        screen: SearchScreen,
        navigationOptions: {
            header: null
        }
    },
    search_result: {
        screen: SearchResultScreen,
        navigationOptions: {
            header: null
        }
    },
    theme: {
        screen: ThemeScreen,
        navigationOptions: {
            header: null
        }
    },
    about: {
        screen: AboutScreen,
        navigationOptions: {
            header: null
        }
    }
},{
    initialRouteName: 'welcome',
    navigationOptions: ({navigation, screenProps}) => ({
        gesturesEnabled: true,
    }),
}
)


export default NavHome  // 返回  <-------------------------------------------------------

修改结果:

结果.gif

都是自己对react-navigation不熟悉,造成的结果,算是收获了一些经验,也分享给大家。
总结一句话:react-navigation多注意嵌套关系

相关文章

网友评论

  • c79e1285cf5f:如果这样做的话, 导航栏必须要自己重新定义了对吗?
  • varrey:可以在每个页面里设置关闭的 有个参数
  • fangkyi03:这个抽屉菜单是有问题的 不这么好 建议少用 你这个项目也许是有一个地方需要用到这个抽屉才到问题还不大 但是如果是一个项目里面会有多个地方使用 并且有可能是由页面按钮触发的话 那问题就来了 因为你手动是用naivgate来打开的 这会导致你如果有多个的话 都会默认显示第一个
    素笺淡墨染流年:@fangkyi03 嗯嗯 了解了

本文标题:react-navigation 嵌套 出现每个页面都能打开侧边

本文链接:https://www.haomeiwen.com/subject/lpkifftx.html