React Navigation - 从选项卡栏打开模式

2024-04-17

使用 React Navigation (6),我将底部选项卡设置为我的主导航器:


export function TabNavigator() {
  const getColor = ({ focused, color }) => (focused ? palette.blue : color)

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="home-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="favourites"
        component={FavouritesScreen}
        options={{
          tabBarLabel: "Favourites",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="heart-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="about"
        component={AboutYouScreen}
        options={{
          tabBarLabel: "About you",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="person-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />

       <Tab.Screen
        name="bottomchat"
        component={ChatNavigator}
        options={{
          tabBarLabel: "Check-in",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="chatbubble-ellipses-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  )
}

使用最后一个选项卡(ChatNavigator),我希望它打开的屏幕是全屏模式,隐藏底部选项卡栏(如果通过顶部的后退按钮,用户可以退出)。

这可能吗?


当我写这个问题时,我找到了一个实际上对我有用的答案在这篇博文中 https://www.reactnativeschool.com/master-react-navigation-v5/open-modal-from-tab-bar

解决方案:

  1. 在父堆栈中创建全屏模式
  2. 将模拟组件传递到选项卡屏幕(这永远不会被调用)
  3. 向选项卡组件添加一个侦听器以防止默认,然后导航到您选择的页面

所以对我来说:

const ChatBase = () => <View style={{ flex: 1, backgroundColor: "red" }} />


export function TabNavigator() {
  const getColor = ({ focused, color }) => (focused ? palette.blue : color)

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="home-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="favourites"
        component={FavouritesScreen}
        options={{
          tabBarLabel: "Favourites",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="heart-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="about"
        component={AboutYouScreen}
        options={{
          tabBarLabel: "About you",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="person-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />

      <Tab.Screen
        name="bottomchat"
        /* Pass in a blank component as the base (this never gets shown) */
        component={ChatBase}
        options={{
          tabBarLabel: "Check-in",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="chatbubble-ellipses-outline" color={getColor(rest)} size={size} />
          ),
        }}
        listeners={({ navigation }) => ({
          tabPress: (e) => {
            e.preventDefault()
            navigation.navigate("chat")
          },
        })}
      />
    </Tab.Navigator>
  )
}

在我的根堆栈导航器中,我有一个名为chat被称为:

export function MainNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyle: { backgroundColor: "transparent" },
        headerShown: false,
      }}
    >
      <Stack.Screen name="main" component={TabNavigator} />
      <Stack.Screen name="chat" component={ChatScreen} />
    </Stack.Navigator>
  )
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Navigation - 从选项卡栏打开模式 的相关文章

随机推荐

  • -s 和 -p 如何改变读取命令?

    我正在尝试解释这段代码 搜索谷歌看看这些命令的含义 但没有运气 我把我对每一行 块对我意味着什么的解释 如果我错了 请纠正我 我是 unix 命令新手 代码 bin bash input 1st command line argument
  • ASP.Net MVC:如何将兴趣与每个学生关联起来

    我在学生和兴趣爱好之间建立联系时遇到了麻烦 我通过可编辑的网络网格显示我的数据 webgrid 有名称文本框 国家 地区选择下拉菜单和爱好复选框 我希望当用户选择每个学生的爱好 可能是一个或多个并按下提交按钮时 我应该能够从学生视图模型中了
  • java.lang.SecurityException:权限拒绝:启动意图 { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER]

    启动时出错activity 不幸的是 我认为它与该项目没有严格联系 因为该应用程序启动于genymotion模拟器 但不在物理设备上 当我跑步时adb devices与真实的连接后我得到 List of devices attached 0
  • io_service::poll_one 非确定性行为

    在下面的代码中 我希望输出始终为 1 因为我希望在以下情况下仅运行一个处理程序 poll one 叫做 然而 一旦大约 300 次 输出实际上是 3 根据我对 boost 库的理解 这似乎不正确 不确定性行为是错误还是预期行为 includ
  • 如何创建一个携带数据的android Intent?

    我可能误解了意图的使用方式 所以我可能在这里问了错误的问题 如果是这样的话 无论如何请帮助我走上正确的轨道 我刚刚开始开发一个 Android 应用程序 它会经常轮询我的服务器以获取消息 当有新消息可用时 我想将其显示给用户 我正在尝试通过
  • Android Studio 3.1.1 更新后,“定位”链接无法打开生成的 APK 文件夹

    更新 Android 3 1 1 更新后出现问题 APK 生成过程完成后 Android Studio Windows 操作系统 会弹出一个窗口来定位或分析 APK 不幸的是 如果我点击locate 什么也没有发生 UPDATE 在 APK
  • 解析器 - 调用 yytext 时出现分段错误

    我的解析器正在识别语法并使用 yylineno 指示正确的错误行 我想打印导致错误的符号 int yyerror string s extern int yylineno defined and maintained in lex yy c
  • 在MIPS中,有符号加法、无符号加法、有符号减法和无符号减法之间有什么区别?

    add rd rs rt addu rd rs rt sub rd rs rt subu rd rs rt 在MIPS中 有符号加法 无符号加法 有符号减法和无符号减法之间有什么区别 如果它们的结果相同 那么分类为使用有符号和无符号方法有什
  • 使用 javascript 在 Android 中更改方向

    document addEventListener orientationChanged updateOrientation 我正在尝试调用一个函数updateOrientation 但该函数只是没有被调用 我正在使用 javascript
  • Bixby:如何获取基于我的位置的信息?例如天气等

    我看到了bixby studio的开发指南并测试了提供的示例 我想要一些更复杂 但非常重要 的服务 例如基于我所在位置的天气信息 此功能在 bixby studio 的当前状态下可用吗 如果可能的话 请告诉我如何做 这是一段可能对您有帮助的
  • 在 C/Linux 中显示图像的最简单方法是什么? [复制]

    这个问题在这里已经有答案了 我很习惯用 C 进行数值计算 但不擅长图形编程 我在 Linux gcc ubuntu 的命令行程序中有一个 Nx x Ny x 3 RGB 矩阵 我想弹出一个窗口 将其作为图像 做到这一点最简单的方法是什么 它
  • SQL - 转换日期时间格式

    我尝试更改 MySQL 上的日期时间格式 T 得到了一个包含一些列的历史表 其中一些列都具有这种格式 DATETIME JJ MM AAAA HH MM 我需要更改为 AAAA MM JJ HH MM SS 我没有 SS 的变量 我想取 0
  • 最小 SDK 版本/目标 SDK 版本与编译 SDK 版本有什么区别?

    最小sdk版本 目标sdk版本 和 编译sdk版本 有什么区别 我知道 min 和 target sdk 是什么意思 但是编译 sdk 版本是什么意思 在 Eclipse 中 我有最小 最大和目标 sdk 但在 android studio
  • Facebook Open Graph 未显示在时间线上

    我在我的应用程序中使用 FB Open Graph 它没有完全发挥作用 当我发布一个对象时 它会出现在用户最近的活动中 然而 它并没有出现在他们的时间表上 元数据没有错误 我正在使用 FBGraph gem 但当我使用curl 执行此操作时
  • SQL 中将月份编号转换为月份名称函数

    我在 SQL Server 中存储了月份 1 2 3 4 12 我想将它们显示为一月 二月等 SQL Server 中是否有类似 MonthName 1 January 的函数 如果可能的话 我试图避免使用 CASE 语句 我认为这是获得月
  • 如何在 Qt5 中创建/读取/写入 JSON 文件

    Qt5 有一个新的 JSON 解析器 我想使用它 问题在于 用外行术语来说 这些函数的作用以及如何用它编写代码并不太清楚 否则我可能读错了 我想知道在 Qt5 中创建 JSON 文件的代码以及 封装 的含义 示例 从文件中读取 json t
  • XML 文本提取

    设想 给定以下 XML 文件
  • python 3 打印生成器

    当我处理 print 函数 Python 3 时出现问题 当我寻找一系列的总和时 我可能会使用以下代码模式 gt gt gt sum i for i in range 101 但是当我倾向于检查我制作的系列时 我选择 print 并假设它会
  • 智能表,onclick事件

    是否可以在智能表上处理 onClick 事件 我已经注释了来自后端的数据 单击某个条目时 我想导航到一个新视图 显示与我单击的条目关联的所有数据 我怎样才能在 SAPUI5 中实现这一点 我可以在 JavaScript 控制器中使用 get
  • React Navigation - 从选项卡栏打开模式

    使用 React Navigation 6 我将底部选项卡设置为我的主导航器 export function TabNavigator const getColor focused color gt focused palette blue