问题标签 [react-navigation-bottom-tab]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
2081 浏览

typescript - React Navigation v.5 中的 createStackNavigator 和 createBottomTabNavigator

我是 react native 的新手,我在我的 react-native 应用程序中使用了新的 react-navigation v.5。当我在 NavigationContainer 中同时使用 createStackNavigator 和 createBottomTabNavigator 时出现错误 - “未定义不是对象”和“已为此容器注册了另一个导航器。您可能在单个“NavigationContainer”或“屏幕”下有多个导航器。确保每个导航器位于单独的“屏幕”容器下。” (在 React Navigation v.5 中)。请告诉我我错在哪里?

应用导航.tsx

应用程序.tsx

0 投票
5 回答
10686 浏览

react-native - 在 React Navigation 5 中传递参数

我正在尝试在选项卡导航器之间传递一些参数。下面是我的程序的结构。粗体是路线

应用程序(选项卡导航器):{(堆栈)和过滤器(屏幕)}

Main (Stack Navigator): { Home (screen) & MediaDetails (screen) }

我在屏幕上有一个与具有onPress()功能的过滤器关联的按钮。我正在传递一些参数(但为了这个问题,我们只考虑参数

现在在与Home关联的屏幕中,我正在读取状态内的参数,如下所示:

App.js中,我将to的初始值设置为 '2020',如下所示:

初始值确实设置为2020。我按下按钮。假设我设置1900。就在this.props.navigation.navigate执行之前,我console.log(this.state.to)的值,它确实更新为1900。但是,随着屏幕变为Home,该值恢复为2020(通过 console.log 观察)

有人能指出这种怪异行为的原因吗?我一直在尝试调试这个几个小时,但没有运气。React Navigation 5 也很新,所以在网上找不到类似的东西。任何帮助将不胜感激。感谢您一路阅读。

编辑:问题已解决,完整代码已删除!

0 投票
5 回答
5202 浏览

react-native - 如何在 react-native 中动态设置 initialRouteName

如何在反应导航中给出动态初始路由名称?如果该单元存在,我们必须重定向到另一条路线,否则我们必须为用户选择另一条路线。

注意:我正在创建一个底部选项卡导航器,我必须在其中设置到该特定底部选项卡导航器的初始路由。

(不是身份验证流程)

0 投票
1 回答
920 浏览

react-navigation - 在 react-navigation v5 中使用深度链接时如何导航到另一个堆栈的屏幕?

在这种情况下,可以通过深度链接打开一个屏幕。有一个<BackButton />组件,我希望按钮的行为是这样的:

  • 如果此屏幕由 开启navigator.navigate,则返回。
  • 如果此屏幕是通过深度链接打开的,则转到主屏幕。

像这样的导航器结构

  • 根(堆栈导航器)
    • 选项卡(底部选项卡导航器)
      • 个人的
    • 主要(堆栈导航器)
      • 店铺

一开始,我写了这样的代码:

此代码有效,但是使用navigation.navigate()函数会导致推送效果(新屏幕来自右边缘),而不是返回(新屏幕来自左边缘)。

然后我尝试使用navigation.replace()navigation.reset()

导航器似乎无法处理这条路线(我认为这是因为我们现在在Main堆栈中,它无法处理参数)。

我能做些什么来纠正导航的行为?

0 投票
0 回答
741 浏览

react-native - React navigation 4、bottom tab navigator:每次后台重新打开app时如何打开初始路由

当前行为

我有一个带有 4 个选项卡的 TabNavigator,每个选项卡都是一个 stackNavigator,现在每个 stackNavigator 只有一个屏幕:主页、地图、预订、个人资料。我正在使用 React Navigation 4。在每个选项卡中,我都将 navigationOption tabBarOnPress 放在屏幕之间导航,因此通过这种方式 backBehavior: 'history' 是有意义的。

但是,如果我在屏幕之间导航可能按 HOME -> PROFILE -> HOME -> MAPS 的顺序,由于导航功能的行为,路由器的堆栈是 PROFILE、HOME、MAPS。类似地,当我们在安卓设备上按下后退按钮时,访问屏幕的顺序是 MAPS -> HOME -> PROFILE,如果我们再次按下后退按钮,我们将退出应用程序,将其放入的背景。现在,回到应用程序中,打开的屏幕是 PROFILE,它也是导航堆栈中的第一条路线。

预期行为

当我从后台重新打开应用程序时,我不想在 PROFILE 屏幕中,而是在 HOME 屏幕中。我想重置导航堆栈中的第一条路线,用 HOME 堆栈更改它。这将是 Instagram 的相同行为(尝试去主页 -> 个人资料 -> 主页,按两次后退按钮;现在第三次按后退按钮:应用程序进入后台;现在重新打开 Instagram:应用程序从主页重新启动)

0 投票
5 回答
10140 浏览

react-native - 任何导航器都未处理带有有效负载的操作 POP

我不知道是什么导致了我的反应原生应用程序中的这个错误。我正在使用 React Navigation 库的第 5 版。

在此处输入图像描述

有时会随机崩溃应用程序。谷歌搜索并没有帮助我理解这是什么。虽然这是一件好事(或坏事),但它非常有选择性。

那么这意味着什么以及可能导致它的原因是什么?

0 投票
1 回答
266 浏览

react-native - 有没有办法强制卸载组件?

在我的移动应用程序中,我有一个带有标签导航的屏幕。在第一个选项卡中,我想添加一个返回处理程序以退出应用程序。但在其他选项卡中,我不希望这种情况发生。我实现了这个,如下所示。

此功能在第一个选项卡中运行良好。但我的问题是,在其他选项卡中,当我单击后退按钮时,应用程序退出。我希望这些选项卡中有不同的功能。根据我的研究,标签导航不会调用 componentWillUnmount。因此,它不会删除选项卡导航上的事件侦听器。但我找不到其他解决方案。

如果有任何解决方案可以仅在第一个选项卡中实现退出应用程序功能,我将不胜感激。

0 投票
1 回答
2248 浏览

react-native - tabBarOnPress 在 React Navigation v5 中不可用

我正在使用 React Navigation v5,@react-navigation/bottom-tabs我的标签看起来像这样。

我想在Home & Settings选项卡上打开屏幕,但在Modal选项卡上,我想打开一个模式,为此,使用 React Navigation v4,可以使用tabBarOnPresswhich 将运行回调,但在 React Navigation v5 中不可用, tabBarOnPressReact Navigation v5有什么替代方案吗?

任何帮助,将不胜感激!

0 投票
1 回答
1527 浏览

react-native - 我在使用 react-navigation 在 tab-navigator 中制作 stack-navigator 时遇到问题

我正在努力使用包含每个 StackNavigator 的 BottomTabNavigator 的反应导航来制作视图,但它会打印错误:undefined is not an object (evaluating 'state.routes')

我尝试制作的应用程序结构是

App.js (BottomTabNavigator)
ㄴ HomeScreen (React.Component 和初始路由)
ㄴ JumoonScreen (React.Component)
ㄴ WalletScreen (React.Component)
ㄴ ShoppingScreen (StackNavigator <- 引起的问题)

App.js 代码是:

从 ShoppingScreen.js 导入的 ShoppingScreen 组件是:

但是,如果我像这样制作 ShoppingScreen.js,它就起作用了。

我的代码有什么问题?

0 投票
1 回答
40 浏览

react-native - 使用 Realm React-Native 即时更新另一个选项卡中的数据

我正在使用 BottomTabNavigator 开发一个 react-native 应用程序。用户可以为一篇文章添加书签,然后我将其保存到 Realm DB。问题是我希望书签文章立即出现在其他选项卡中,但我只有在重新启动应用程序后才能看到书签文章。请让我知道如何在将项目添加到 RealmDB 后立即获取数据。