问题标签 [tabnavigator]

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 回答
11977 浏览

javascript - 如何为 TabNavigator 使用 tabBarComponent?标签栏不显示

我正在尝试制作自己的自定义标签栏,似乎 tabBarComponent 是通过设置为我自己的组件来做到这一点的方法。使用下面的代码,我的标签栏不会出现。

在 FooterTabs.js 中:

我错过了什么?

0 投票
1 回答
8895 浏览

react-native - 如何使用 react-navigation 在 react-native 中添加搜索栏和选项卡按钮

在此处输入图像描述

我有一个登录屏幕,当用户登录时,他们会被带到一个类似于上面显示的屏幕。

在这个屏幕中,我有一个 tabNavigator,其中包含 5 个屏幕的标签,类似于上图所示的那个。它还有一个带有搜索栏的标题。这个标题应该只显示在 5 个选项卡中的 4 个中,并且我需要在第 5 个选项卡中显示不同的标题。

有没有办法做到这一点?我知道我可以在呈现相同标题的 5 个选项卡中的 4 个中添加一个视图,并在呈现不同标题的第 5 个屏幕中添加一个视图,但我想知道是否有一种方法可以做到这一点而不必呈现相同的视图在所有 4 个选项卡中一次又一次。

PS它应该适用于iOS和Android

0 投票
1 回答
904 浏览

react-native - 结合 TabNavigator 和 Drawernavigator

我使用 react-navigation 并希望将 TabNavigator 和 DrawerNavigator 一起使用。我知道你可以嵌套导航器,但是只有抽屉的一个链接有我的选项卡。

我希望标签导航始终可见,并且抽屉应该可用。

抽屉滑过标签

所以顶部的三个选项卡应该始终可见。并且抽屉可以滑出以链接不同的场景。

但是我的代码的问题是选项卡仅适用于一个场景。还尝试了 StackNavigators 但必须是另一种解决方案才能同时使用两个导航器。

0 投票
0 回答
269 浏览

wpf - 将键盘焦点更改为特定控件

我有一个用户控件,它有几个不同逻辑级别的元素。默认情况下,键盘焦点转到最高级别的逻辑控件,但我想将焦点切换到逻辑树深处的其他一些控件(但是在加载此用户控件时会加载所有控件)。

XAML 如下所示,当 OverlayContent(一个对话框)消失时,我希望焦点移动到“EigthLevelTB”一个文本框,但默认情况下控制转到“ThridLevelGB”。用户可以使用选项卡并导航到“EigthLevelTB”,但他们希望默认焦点位于此处而不是选项卡。

我尝试在 UserControl.Loaded、FocuableChanged 事件等中将焦点设置在此 EigthLevelTB 上。我还尝试设置 KeyboardNavigation.TabIndex="0",但对我没有任何作用。

请建议这里可能出了什么问题?

谢谢,

RDV

0 投票
1 回答
417 浏览

ios - 单击堆栈导航器选项卡时渲染屏幕

我使用TabNavigator. 这是我使用的库。总共我有 3 个标签。因此,初始选项卡可以轻松加载和渲染。但是问题出在第三个选项卡上。我检查了console.log()第三个选项卡组件中的每个方法。在我与之交互之前,每个方法都在执行但不显示结果(显示空白屏幕)。当我开始与之交互时,只有数据会重新渲染(我认为是这样)。

我怎么解决这个问题?有什么帮助吗?

谢谢

0 投票
1 回答
1880 浏览

react-native - react-navigation tab navigator 屏幕内容未显示/屏幕为空白问题

我对 react-navigation 选项卡导航器有疑问。屏幕内容未显示/屏幕为空白。有任何想法吗 ?这是我的导航器结构:

更新:

这是包含渲染方法的 App.js 文件:

我确定它适用于第一个 switch 案例,但是出现了一个空白屏幕,我不知道原因。

0 投票
1 回答
710 浏览

reactjs - React-Native TabNavigator 和 Modals

我正在尝试使用库来显示自定义模式对话框。我有一个具有三个屏幕的 StackNavigator,其中 MainScreen 是一个 TabNavigator,我在其上设置了以下标题:

第二个按钮打开一个简单的警报(来自 react-native)。使用第一个按钮,我将打开一个自定义模式来显示应用程序和开发人员的详细信息。

主屏幕有以下渲染方法;

其中 TabContent 只是我的选项卡配置:

上面链接的库需要这样的布局:

但是,如果我将 TabContent选项卡放在该视图中,则选项卡导航器将不再起作用。

有没有办法让该库中的 TabNavigator 和 Modal 一起工作?

0 投票
1 回答
1809 浏览

react-native - 处理 react-navigation 的 TabNavigator 中的单击事件以刷新反应原生应用程序中的视图

我正在编写 React Native 应用程序。我正在使用 react-navigation 来导航屏幕。我有 2 个 StackNavigator,它们都留在 TabNavigator 中。我还有一个 DrawerNavigator。

问题1:我希望当我点击标签home1或user1时,home1的屏幕(screenA)或user1的屏幕(screenC)会刷新。有没有办法处理哪个选项卡聚焦的事件?

问题 2:在 App 类的 DrawerMenu 中,我有一个道具“名称”。我希望 screenA 会收到道具“名称”。我要怎么做才能实现我的目标?

太感谢了。

0 投票
2 回答
785 浏览

android - 在 TabNavigator 中到达屏幕时如何启动功能?[反应导航]

问题是在加载选项卡导航器时会调用函数constructor()componentDidMount() 。每次用户到达名为myScreeen的屏幕时,我都需要调用函数,例如我们该怎么做?

0 投票
3 回答
12097 浏览

react-native - 如何使用 react-navigation 处理 React Native App 中 TabNavigator 选项卡项的点击事件?

我正在编程 React Native App。我正在使用 react-navigation 来导航屏幕。

我有 2 个 Stack Navigator,它们都留在 Tab Navigator 中。当我按下 TabBar 上的选项卡项以刷新其视图时,我想处理单击事件。

我想将来自 TabClass 组件的 clickButton() 函数传递给处理事件单击标签栏的代码。当 if(props.navigation.state.index === index),我希望它会调用 clickButton()。我试了一下,但它不起作用。有什么办法可以解决我的问题吗?

我试过onNavigationStateChange(prevState,currentState)。

但是 _handleNavagationStateChange(prevState, currentState) 只在导航状态发生变化时运行(例如,如果我停留在 HomeTab,我点击 User Tab Item,这个函数会运行;如果我停留在 HomeTab,我点击 Home Tab Item,这个函数会不跑)。

有什么方法可以处理选项卡项目上的点击事件。