react-navigation的各种导航嵌套优劣势

已于 2022-12-10 17:15:05 修改
阅读量1.2k 收藏 5
点赞数 1
分类专栏： 学习笔记 文章标签： navigation RN
于 2022-10-09 11:36:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gg_ios/article/details/127126539
版权

前言

默认你已经对(Stac/Drawer/Tab)三种导航已经有了基本的了解(V6版本)，另外我下面提供的demo都是可直接copy运行的，要是运行不了，那就自行debug下吧

如果期望对react-navigation快速的有个系统的了解，点击查看react-navigation v6 中文极速版

一、Tab嵌套Stack

  1. 代码示例

    import * as React from 'react'
import {Button, Text, View, StyleSheet} from 'react-native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {NavigationContainer} from '@react-navigation/native'

const STYLE = StyleSheet.create({
  center: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }
})

function Screen3() {
  return (
    <View style={STYLE.center}>
      <Text>Screen 3</Text>
    </View>
  )
}

function Screen1({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 1</Text>
      <Button
        title="一层一层进入 Screen3"
        onPress={() => navigation.navigate('BStack', {screen: 'Screen3'})}
      />
      <Button 
        title="直接进入Go to Screen3" 
        onPress={() => navigation.navigate('Screen3')} />
    </View>
  )
}

function Screen2({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 2</Text>
      <Button title="直接进入 Screen3" onPress={() => navigation.navigate('Screen3')} />
    </View>
  )
}

const HomeStack = createNativeStackNavigator()

function AStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Screen1" component={Screen1} />
      <HomeStack.Screen name="Screen3" component={Screen3} />
    </HomeStack.Navigator>
  )
}

const SettingsStack = createNativeStackNavigator()

function BStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen  name="Screen2" component={Screen2} />
      <SettingsStack.Screen name="Screen3" component={Screen3} />
    </SettingsStack.Navigator>
  )
}

const Tab = createBottomTabNavigator()

export default function Demo01Navigator() {
  return (
    <NavigationContainer>
	  <Tab.Navigator screenOptions={{headerShown: false}}>
	    <Tab.Screen name="AStack" component={AStackScreen} />
	    <Tab.Screen name="BStack" component={BStackScreen} />
	  </Tab.Navigator>
    </NavigationContainer>
  )
}

  2. 结构

    Tab
  AStack
    Screen1
    Screen3
  BStack
    Screen2
    Screen3

  3. 一些特性

    1. 因为最外层是Tab，因此所有跳转的Screen底部都会有TabBar
    2. 跳转同栈下的Screen，可以直接跳转，比如Screen1跳转到AStack中的Screen3的方式如下：navigation.navigate(‘Screen3’)
    3. 跳转不同栈的Screen，禁止直接跳转，需要指定层级，比如Screen1跳转到BStack中的Screen3的方式如下：navigation.navigate(‘BStack’, {screen: ‘Screen3’})，并且该case下也直接触发了Tab的切换

二、Stack嵌套Tab

  1. 示例代码

    import * as React from 'react'
import {Button, Text, View, StyleSheet} from 'react-native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {NavigationContainer} from '@react-navigation/native'

const STYLE = StyleSheet.create({
  center: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }
})

function Screen1({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 1</Text>
      <Button
        title="进入Tab下的Screen2"
        onPress={() => navigation.jumpTo('Screen2')}
      />
      <Button
        title="进入Stack下的Screen2"
        onPress={() => navigation.push('Screen2')}
      />
    </View>
  )
}

function Screen2({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 2</Text>
      <Button title="直接进入Stack下的Screen3" onPress={() => navigation.navigate('Screen3')} />
    </View>
  )
}

function Screen3({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 3</Text>
      <Button
        title="进入Tab下的Screen1"
        onPress={() => navigation.navigate('Screen1')}
      />
    </View>
  )
}

const Tab = createBottomTabNavigator()

function TabNavigator() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
    </Tab.Navigator>
  )
}

const Stack = createNativeStackNavigator()

export default function Demo02Navigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tab" component={TabNavigator} />
        <Stack.Screen name="Screen2" component={Screen2} />
        <Stack.Screen name="Screen3" component={Screen3} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

  2. 结构

    Stack
  Tab
    Screen1
    Screen2
  Screen2
  Screen3

  3. 一些特性

    1. 只有Tab下的Screen才有tabBar，若某个Screen即在Tab下也在Stack下，就看跳转方式了，比如在Screen1中
      • 使用jumpTo跳转到Screen2，去到的就是Tab下的Screen2(有tabBar)，
      • 使用push跳转到Screen2，去到的就是Stack下的Screen2(无tabBar)，
      • 使用navigate跳转到Screen2去到的也是Tab下的Screen2(有tabBar)，初步分析是因为Tab初始化时路由栈中有了Screen2，在结合navigate的特性，去到Tab下的Screen2也解释得通
    2. 这种case下除了固定的tab外，其他的跳转就不需要考虑嵌套层级，直接指定名字即可
    3. 针对指定页面不显示tabBar，官方也推荐这种嵌套结构，点击查看官方说明

三、Drawer嵌套

  1. 示例代码

    import * as React from 'react'
import {Button, Text, View, StyleSheet} from 'react-native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {createDrawerNavigator} from '@react-navigation/drawer'
import {NavigationContainer} from '@react-navigation/native'

const STYLE = StyleSheet.create({
  center: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }
})

function Screen1({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 1</Text>
      <Button
        title="进入Drawer下的Screen3"
        onPress={() => navigation.navigate('LeftDrawer', {screen: 'Screen3'})}
      />
    </View>
  )
}

function Screen2({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 2</Text>
    </View>
  )
}

function Screen3({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 3</Text>
      <Button
        title="打开抽屉"
        onPress={() => navigation.openDrawer()}
      />
      <Button
        title="进入Stack下的Screen4"
        onPress={() => navigation.navigate('Screen4')}
      />
    </View>
  )
}


function Screen4({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 3</Text>
      <Button
        title="进入Tab下的Screen1"
        onPress={() => navigation.navigate('Screen1')}
      />
    </View>
  )
}

const Tab = createBottomTabNavigator()

function TabNavigator() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
    </Tab.Navigator>
  )
}

const Drawer = createDrawerNavigator()

function LeftDrawerNavigator() {
  return (
    <Drawer.Navigator
      drawerContent={() => {
        return <Text>XXXXXx</Text>
      }}
      
      screenOptions={{swipeEnabled: false, "headerShown": true, "drawerPosition": 'left'}}
    >
      <Drawer.Screen name="Screen3" options={{title: 'Screen3'}} component={Screen3} />
    </Drawer.Navigator>
  )
}

const Stack = createNativeStackNavigator()

export default function Demo03Navigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Tab">
        <Stack.Screen name="Tab" component={TabNavigator} />
        <Stack.Screen name="LeftDrawer" options={{"headerShown": false}} component={LeftDrawerNavigator} />

        <Stack.Screen name="Screen4" component={Screen4} />
      </Stack.Navigator>
    </NavigationContainer>
   
  )
}

  2. 结构

    Stack
  Tab
    Screen1
    Screen2
  LeftDrawer
    Screen3
  Screen4

  3. 一些特性

    1. 只有Drawer下的Screen才有抽屉效果，若想有右边抽屉在LeftDrawer的同级增加一个RightDrawer即可，那么如何让一个Screen既有左边抽屉又有右边抽屉，有两种方案：
      1. 将Screen即放在LeftDrawer下，也放在RightDrawer下，跳转前指定栈层级即可

        这种方式让一个Screen同时只有一个导航效果，要么左要么右，具体是左还是右，取决于父级是谁

      2. Drawer的父子嵌套，详情见官方说明

        这种方式可以让一个Screen，同时拥有左右两种导航效果

    2. Drawner默认也带有导航栏，可通过options设置具体使用谁的导航栏。另外因为Drawer是嵌套在stack下，因此抽屉效果始终会在stack的导航栏下层显示
    3. 跳转有Drawer效果的页面时，需要确定他的父级，个人对这种模式很不爽，我理想的状态是在打开抽屉效果时指定左边还是右边，这种比较符合开发习惯，详情见第四种嵌套

四、Drawer作为根导航嵌套

官方的多Drawer嵌套示例

  1. 代码示例

    import * as React from 'react'
import {Button, Text, View, StyleSheet} from 'react-native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {NavigationContainer} from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer'

const STYLE = StyleSheet.create({
  center: {
    flex: 1, justifyContent: 'center', alignItems: 'center'
  }
})

function Screen1({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 1</Text>
      <Button
        title="进入Scrrn3"
        onPress={() => navigation.navigate('Screen3')}
      />
    </View>
  )
}

function Screen2({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 2</Text>
    </View>
  )
}

function Screen3({navigation}: any) {
  return (
    <View style={STYLE.center}>
      <Text>Screen 3</Text>
      <Button
        title="打开左抽屉"
        onPress={() => navigation.getParent('LeftDrawer').openDrawer()}
      />
      <Button
        title="打开右抽屉"
        onPress={() => navigation.getParent('RightDrawer').openDrawer()}
      />
    </View>
  )
}

const Tab = createBottomTabNavigator()

function TabNavigator() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
    </Tab.Navigator>
  )
}

const LeftDrawer = createDrawerNavigator();

const RightDrawer = createDrawerNavigator();

const RightDrawerNavigator = () => {
  return (
    <RightDrawer.Navigator
      id="RightDrawer"
      screenOptions={{ drawerPosition: 'right', headerShown: false }}
    >
      <RightDrawer.Screen name="stack" component={StackNavigator} />
    </RightDrawer.Navigator>
  );
};


const Stack = createNativeStackNavigator()

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Tab" component={TabNavigator} />
      <Stack.Screen name="Screen3" component={Screen3} />
    </Stack.Navigator>
  )
}

export default function Demo04Navigator() {
  return (
    <NavigationContainer>
      <LeftDrawer.Navigator id="LeftDrawer" screenOptions={{ drawerPosition: 'left', headerShown: false }}>
        <LeftDrawer.Screen name='LeftDrawer' component={RightDrawerNavigator}/>
      </LeftDrawer.Navigator>
    </NavigationContainer>
  )
}

  2. 结构

    LeftDrawer
  RightDrawer
    Stack
      Tab
        Screen1
        Screen2
      Scrren3
      Scrren4

  3. 一些特性

    1. 该嵌套模式，可以实现所有的Screen都同时支持左右两种抽屉效果，并且打开哪个抽屉是在调用打开抽屉API时决定的，而非在进入当前页面时决定
    2. 因为抽屉是根路由，因此抽屉效果是覆盖在stack的navBar上
    3. 这种嵌套在web上加载首页时会快速的显示左右抽屉并消失，目前没有找到合适的解决方案

五、总结

没有最好，只有最适合自己业务的，大家可根据业务情况做抉择，或者扩展出更适合自己业务的导航嵌套模式

爬不上树的小松鼠
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Navigation 的使用分类指南（一）Tab navigation
u010418640的博客
07-04 1466
原文链接基础部分结束了，接下来时分类指南部分。在移动app中最普遍的导航形式也许就是基于标签（tab）的导航了。可能时屏幕底部的标签或者在header下方（甚至替换掉header）。本文涉及到createBottomTabNavigator。你也可以使用createMaterialBottomTabNavigator 和createMaterialTopTabNavigator为你的应用添加标签。...
React Native Navigation 5.x 子页面不显示底部菜单
galoiszhou的博客
02-27 1283
React Native Navigation 5.x 子页面不显示底部菜单 官方文档上面是有一个文档的 A tab navigator contains a stack and you want to hide the tab bar on specific screens, 但是现在是 NOT FOUND 网上也找到了解决方案: 但是这个是 4.x 版本的, 对于新版本无效. 解决方案 ...
集成react-navigation路由导航与避坑指南
最新发布
qq_42430654的博客
04-26 820
作为一个RN新人，在简单了解了控件使用后，一个重头就在于路由跳转React Native 官网指出现在主推的路由跳转方案是react-navigation，那么对于其他方案这边就不做了解了。react-navigation官网在集成这个东西的时候，踩过很多坑，业余时间吃了一个多礼拜，因此，这篇博文的目的在于简介react-navigation集成的流程，以及遇到各种问题的解决办法。
React-Navigation架构嵌套路由：
贺知叶的博客
12-21 1568
React-Navigation ^5x架构嵌套路由： react-native使用的版本是^0.64，导航用的5x。目前已经出到了6x,不过也相差不大。 目录React-Navigation ^5x架构嵌套路由：前言一、React-Navigation包引用二、import { NavigationContainer } from '@react-navigation/native'1.注册主路由容器 NavigationContainer2.App.js / index.js三、import { c
React Navigation——底部导航栏设计
qq_39750926的博客
11-20 1111
项目使用的框架是React Native，适配app、移动web、pcweb，记录一下自己遇到的坑 1.如何使底部导航栏的宽度随着pc web的宽度变化而变化 不能使用React native 的Dimensions来获取宽度，这个只能一次获取，如果用户不刷新浏览器，只是变换了浏览器窗口的话，就会出现错位，需要使用useWindowDimensions，这个方法会在屏幕尺寸改变的时候立即调用，有监听的作用，这样就能立即更新导航栏的宽度，而无需刷新页面 2.底部导航栏宽度自定义 ...
RN项目中实现React-Navigation动态底部导航栏
weixin_34315665的博客
06-11 2810
需求 这是去年 App 项目提出的一个需求，因为我们做的这个 App 区分了很多渠道，同时登录用户也有很多状态，一些菜单需要动态的显示隐藏。项目是使用的 React-Native 框架，路由库选择官方推荐的 react-navigation，所以要实现这个需求，必须是改动 react-navigation 的配置。但是 react-navigation 的文档非常扯淡，react-navigati...
React Native react-navigation 导航使用详解
08-28
React Native react-navigation 导航使用详解 React Native 中的 react-navigation 库是当前最流行的导航解决方案之一，该库提供了强大的导航功能，可以满足大多数移动应用程序的需求。下面我们将详细介绍 react-...
react-navigation-backhandler：通过React-Navigation轻松处理Android后退按钮行为
02-05
使用React-Navigation轻松处理Android后退按钮行为。 注意使用此软件包的版本1进行react-navigation版本4及更低版本 使用此软件包的版本2进行react-navigation版本5 安装 使用npm安装： $ npm install react-...
react-navigation-v5-example:React-Navigation v5 API的示例
05-02
在这个`react-navigation-v5-example`项目中，我们将会深入探讨React-Navigation v5 API的各种用法，包括StackNavigator、DrawerNavigator、BottomTabNavigator和MaterialTopTabNavigator。 首先，让我们详细讨论...
react-native-navigation-hooks:一组用于React Native导航的React钩子
05-23
`react-native-navigation-hooks`库将这种思想应用到了React Native的导航场景中。它提供了诸如useNavigation、useRoute、useLinkTo等自定义Hook，这些Hook可以帮助我们轻松地在应用中控制导航行为。例如，`use...
官方推荐react-navigation的具体使用详解
08-27
本篇文章主要介绍了官方推荐react-navigation的具体使用详解，react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。非常具有实用价值，需要的朋友可以参考下
React Navigation的‘createBottomTabNavigator()‘ has been moved to ‘react-navigation-tabs‘
向着太阳迎着光
04-21 907
错误日志： ‘createBottomTabNavigator()’ has been moved to ‘react-navigation-tabs’ 如下图所示： 待解决：
React-Native入坑第一天: 使用React-Navigator配置APP页面导航
qq_44746132的博客
07-30 612
React-Native入坑第一天: 使用React-Navigator配置APP页面导航 前置: 为什么记录这篇文章,主要原因是我在配置React-Navagator导航的时候发现现在网上的很多的关于React-Navigator的配置教程都比较老了，和现在最新的React-Navigator不相对应，于是才转身到官网，跟着官网进行配置，并对这次使用React-Navigator的经历做一次记录: 在老版本的React-Navigator中对于APP页面路由的配置一般从react-navigatio
react native学习笔记10——react-navigation的嵌套使用
MrOnion的专栏
09-24 4426
前面介绍了react-navigation的StackNavigator、TabNavigator、DrawerNavigator 的基本使用方法，在实际项目中通常需要嵌套这几种导航方式。下面介绍这几种导航方式的嵌套使用方法。1.StackNavigator与TabNavigator的嵌套使用StackNavigator与TabNavigator嵌套的App有很多，例如淘宝、京东等，下部选项卡导航，
React Native未来导航库：react-navigation 使用详解（基础篇）
热门推荐
...
05-17 9万+
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 上篇博客和大家分享了关于React Native jsBundle预加载，界面启动优化的内容，详情可点击： 基于最新版本React Native实现JsBundle预加载，界面秒开优化 一、开源库介绍 今年1月份，新开源的react-natvigation库备受瞩目。在短短不到3个月的时间，gith...
react-navigation组件 TabNavigator模式 底部图标tabBarIcon不显示解决方案
Ss的博客
06-21 1万+
今天使用了react-navigation组件中的 TabNavigation模式创建底部导航栏，切换效果非常赞。但在引入react-native-vector-icons组件，并在tabBarIcon中配置了Icon图标的时候，遇到一个大坑，图标始终不显示，也不报错，甚是一头雾水。最后在网上查询，原来是要设置TabNavigator方法的第二个参数中tabBarOptions: { showIc...
React-navigation TabNavigator适配ios机型
m0_37779627的博客
07-03 702
项目中使用TabNavigator实现底部三个tab页的跳转，在android机型上没有问题，但是适配IOS的时候发现图标都靠上如下图：经查看TabNavigator的实现发现如下问题：在TabBarBottom的_renderIcon方法里初始化TabBarIcon的时候有传一个styleshowLabel是外边传进来的控制是否显示tab上的标题的。useHorizontalTabs的实现如下：...
React-Navigation之TabNavigator 配置
一点一刻
05-07 2007
React-Navigation的TabNavigatora相关配置及意义
react-native react-navigation
07-27
React Navigation 是一个用于 React Native 应用程序的流行导航库。它提供了一种简单而灵活的方式来管理应用程序中的屏幕导航和路由。React Navigation 支持多种导航器类型，包括 Stack Navigator（堆栈导航器）、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值