admin管理员组

文章数量:1633990

React-Navigation ^5x架构嵌套路由：

react-native使用的版本是^0.64，导航用的5x。目前已经出到了6x,不过也相差不大。

目录

  • React-Navigation ^5x架构嵌套路由：
  • 前言
  • 一、React-Navigation包引用
  • 二、import { NavigationContainer } from '@react-navigation/native'
    • 1.注册主路由容器 NavigationContainer
    • 2.App.js / index.js
  • 三、import { createDrawerNavigator } from '@react-navigation/drawer';
    • 1.注册抽屉容器 DrawerNavigation
  • 四、import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    • 1.注册底部导航栏 BottomTabNavigation
  • 四、import { createStackNavigator } from '@react-navigation/stack';
    • 1.子模块嵌套 Stack
  • 总结

前言

各个子模块分开定义路由肯定方便我们日后扩展业务需求，也方便后续维护人员可以更快的维护以及新成员更快的熟悉业务代码。

不多说了，直接贴代码开始。

一、React-Navigation包引用

React-Navigation ^5x导入的各个库官方.文档已经提供给我们了，只需要按照正常流程 install 即可。

二、import { NavigationContainer } from ‘@react-navigation/native’

1.注册主路由容器 NavigationContainer

代码如下（示例）：

2.App.js / index.js

代码如下（示例）：

 return (
      <Root>
        <ContextProvider>
          <NavigationContainers />
        </ContextProvider>
      </Root>
  );

App.js 入口以NavigationContainers为中心，假如有Redux就直接包裹在外层。

三、import { createDrawerNavigator } from ‘@react-navigation/drawer’;

1.注册抽屉容器 DrawerNavigation

代码如下（示例）：

DrawerNavigation以包裹底部导航栏并在drawerContent属性内定义抽屉UI。

四、import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;

1.注册底部导航栏 BottomTabNavigation

底部导航栏按照正常的来写即可，而我会在里面比如首页使用 HomeStack 来注册子模块。

四、import { createStackNavigator } from ‘@react-navigation/stack’;

1.子模块嵌套 Stack


各个屏幕定义在Stack内。

总结

以上就是我自己的嵌套路由定义。

本文标签： 嵌套路由架构Reactnavigation

版权声明：本文标题：React-Navigation架构嵌套路由： 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729177318a1188881.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。