问题标签 [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.
react-native - 深色模式下底部选项卡的 SafeArea 颜色无法更改
从昨天开始我就一直陷入这个问题,我找不到解决方案。
我一直在尝试调整 iPhone X 中 safeArea 的颜色,它在顶部和底部以及没有标签的屏幕上运行良好,但是,在带有标签导航器的屏幕中,底部的 safeArea 始终为白色,如图所示截图。有谁知道如何解决这个问题?
另外,我想问一下使用普通的 SafeAreaView 组件并删除 SafeAreaProvider 并删除 react-native-safe-area-context 包是否会更好,我只是将其添加为解决此问题的试用版,但我是第一次使用反应原生的普通 SafeAreaView 组件;
在 App 组件中:
在 CatNavigator 组件中:
在设置选项卡导航器中:
在设置导航器中:
最后在设置屏幕中:
react-native - 错误:未定义无法解析模块`@react-navigation/bottom-tabs`
一直在寻找有关导航错误模块的解决方案。我试过reset-cache,删除nodu_modules,重新安装模块,但仍然无法正常工作。
错误的完整细节
包.json
应用程序.js
javascript - 将参数从堆栈导航器传递到选项卡导航器(反应导航 5)
我正在尝试将用户 ID 从登录屏幕传递到作为嵌套选项卡导航器一部分的主屏幕。这是我的应用程序的结构:
每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时,我都会收到一条错误消息,指出它不是一个函数。经过仔细检查,我发现 this.props.navigation.state 是未定义的。可能意味着我的参数没有传递到主屏幕,即使我在导航到它时没有任何问题。
我尝试使用 NavigationActions,但我收到一个在其他任何地方都没有提到的错误。
我像这样导航到主页:
我也试过这个语法:
但我得到同样的错误
还值得注意的是,我使用了 React.component 而不是将屏幕变成函数。我不确定这是否会导致任何问题,因为在 react-navigation v5 的教程中,我看到这个人使用函数而不是反应组件。
任何帮助将不胜感激!
reactjs - 将参数传递给选项卡导航器 React Navigation 5
我正在使用materialTopTabs
它,一旦安装,它似乎会加载导航器中的所有屏幕。我有一个屏幕列表,里面有一个带有 2 个屏幕的选项卡导航器:Posts和Users。这两个屏幕都依赖于从List传递的参数。但是,我只能使用此方法将参数传递到其中一个屏幕:
我试图通过这样做直接将参数传递给我的导航器:
第一个选项只允许我通过一个屏幕。第二个选项允许我访问导航器中的参数,如下所示:
有没有办法传递temp
到我的两个屏幕?如果没有,有没有更好的方法来处理这种情况?
这是代码StackNavigator
android - 如何处理 React Native 底部选项卡中的后退按钮行为?
当我的应用程序打开时,我有一个@react-navigation/bottom-tabs导航器,其内容如下:
我的代码中有一个BackHandler,当从主页按下后退按钮时,它会使应用程序退出。一切都很好,我检查了按下后退按钮时是否调用了后处理程序。
但是当我切换到任何其他选项卡然后返回主页并按返回退出应用程序时,后处理程序停止工作并且应用程序显示错误“操作'GO_BACK'没有被任何导航器处理。是否有任何屏幕可以返回至?”
这是一个仅限开发的警告,但在签名版本中,应用程序不会显示任何错误,甚至不会退出。
我该如何解决这个“GO_BACK”操作?
react-native - 如何找到 React Navigation TabBarIcon/TabBar 元素中使用的“renderIcon”函数的规范?
使用了此功能,但我找不到它的定义位置。我还看到很多使用此代码的教程 - 所以我不确定人们如何理解它是如何使用的。
我从源代码中提取了这个:
找不到这种方法的来源,只有它被使用过。文档中的任何地方都没有提到这种方法 - 我可以找到。
我错过了什么?
react-native - React-Native:所有选项卡上的抽屉导航器(react-navigation v5)
我想要一个带有 BottomTabNavigation 的应用程序。此外,我希望所有选项卡都可以使用 DrawerNavigation 。
我的AppNavigator.js
包含以下内容。我只能“访问” TabNavigator。抽屉不可访问。
如果我将 DrawerScreen 放入 TabsScreen 的第一个元素中,则 DrawerNavigation 只能在第一个选项卡上访问,而不能在所有其他选项卡上访问。反之亦然。如果我将 TabsScreen 放入 DrawerScreen 的第一个元素,则只能在 DrawerScreen 的第一个元素处访问选项卡。
如何在所有选项卡中访问抽屉?我希望将选项卡作为我的主要导航,但因为有更多菜单选项,我希望用户能够从所有视图访问抽屉。每个选项卡都有自己的屏幕,具有自己的功能。当我打开抽屉并访问一个抽屉条目时,它会打开另一个屏幕,这也是“主”选项卡导航。
有任何想法吗?:-)
react-native - 如何在反应导航 v4 中从底部选项卡导航器调用警报
为了调用 stackNavigator,我们使用 props.navigation.navigate('home')。
但是当我点击底部标签导航图标时如何发出警报。