问题标签 [react-native-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 回答
240 浏览

javascript - React Native:为什么状态变量只在热重载时更新?

情景

在我的 React Native 应用程序中,我有一个选项卡导航器。在每个选项卡中,我都有一个<Checkbox>根据状态变量选中/取消选中的组件,您可以通过单击复选框来切换选中/取消选中的值。这些 Checkbox 组件如下所示:

每个选项卡都是具有自己状态的自己的组件,每个选项卡都包含状态变量a。每个都<Checkbox>从“检查”开始,即this.state.atrue

不寻常的行为

假设我们有选项卡 A、B 和 C,它们this.state.a最初都带有true(因此它们的每个复选框都被选中)。如果我单击选项卡 A 中的复选框,则this.state.a在 A 中变为false并且复选框按预期变为未选中状态。但是当我导航到选项卡 B 时,那里的复选框也未选中。this.state.a在 B 中仍然true出于某种原因。如果我保存我的一个文件,屏幕热重新加载,并且this.state.a在 B 中现在将变为false.

我的问题是:

  1. 为什么切换一个选项卡中的复选框会影响其他选项卡中复选框的切换值?

  2. this.state.a当不切换到时,B 中的复选框如何从选中变为未选中false

  3. 为什么this.state.a在B中切换到false当我热重载页面时?

0 投票
1 回答
1413 浏览

react-native - 更改选项卡导航器名称和标题

我是 react native 的新手,我创建了一个底部选项卡导航器。我有 3 个菜单:Home、Tenants 和 WorkOrders。如何更改 WorkOrders 以将按钮名称和标题显示为“Work Orders”而不是“WorkOrders”?

谢谢

0 投票
1 回答
294 浏览

react-native - 有没有办法改变组件而不是 App.js 中的标签栏样式?

我的应用程序通过 LTR 和 RTL 支持支持英语和阿拉伯语。

我正在使用 BottomTabBarNavigationcreateBottomTabNavigator作为选项卡菜单,它工作正常。

我为选项卡菜单设置了以下样式。

在上面的样式中,如果我添加flexDirection: 'row'或者flexDirection: 'row-reverse'它给了我想要的翻转选项卡菜单方向的样式。

我想要实现的是,我有一个更改语言屏幕,我希望标签栏应用'row-reverse'选择阿拉伯语和选择'row'英语的样式。

在 tabBarOptions 中有这样的东西

问题是我无法在 App.js 中执行此操作,我想在加载应用程序时在其中一个组件中执行此操作,有没有办法在 react-native 中实现这一点?

谢谢

0 投票
1 回答
64 浏览

react-native - 访问屏幕属性

我正在试验 React Natives createBottomTabNavigator。我目前正在渲染文档中显示的屏幕。我希望通过使用图标来扩展它,但我想以不同于文档中所示的方式进行操作。

对于每个屏幕,我都在定义一个navigationProperty对象,其中包含一个图标和其他信息。

我将我的定义tabNavigator如下:

我希望使用该defaultNavigationOptions属性来添加图标,而不是在函数中定义它们我希望使用每个屏幕中定义的属性。为了理解,这里是AboutScreen代码。

正如我们在上面的代码示例中看到的,我在navigationOptions对象中定义了两个属性。标签和图标。我的问题是,如何在defaultNavigationOptions配置中使用这些定义的属性?这甚至可能吗?

这是我目前的配置:

谢谢

0 投票
1 回答
809 浏览

android - React Navigation 选项卡导航导航在 Android 上不起作用(在 iOS 上工作正常)

我在我的 React Native 应用程序中使用 React Navigation,并且我正在尝试以编程方式更改选项卡。

这是我的代码:

navigation.navigate('key of the tab route');

而在我的导航对象的状态下(如果我只是喜欢这些路线,我可能会错过一个细节):

在此处输入图像描述

它在 iOS 中运行良好(导航到正确的选项卡),而在 Android 上则没有任何反应。如果我指定正确的路线名称并且指定不存在的路线名称,它会在返回时执行某些操作,但屏幕上没有任何反应。truefalse

我使用的是 Android 8.0、React Native 0.59.9、React 16.8.6、React Navigation 3.11.0。

我究竟做错了什么?

0 投票
4 回答
3242 浏览

react-native - TabNavigator 子屏幕如何引用父 StackNavigator?

我正在尝试从子选项卡导航器导航到父堆栈导航器的屏幕。但是 this.props.navigation.navigate 只能导航到孩子的导航道具'

我想从 (TabNavigator)TabScreen 的主页导航到 (StackNavigator)AppNavigator 的 DetailPage。但是 OnPress 什么都不做。但是,它可以导航到 TabNavigator(子导航器)的不同屏幕。请帮助我如何从子 TabNavigator 导航到父 StackNavigator

0 投票
4 回答
8503 浏览

reactjs - React Native - 将道具从一个屏幕传递到另一个屏幕(使用标签导航器进行导航)

我需要将数据从我的 HomeScreen 传递到我的 SecondScreen。如果我单击 HomeScreen 上的按钮导航到 SecondScreen,有很多示例说明如何执行此操作,但是如果我使用 v2 底部选项卡导航器,则找不到任何显示如何传递到 SecondScreen 的内容从 HomeScreen 到 SecondScreen。我尝试了 screenprops 和其他几种方法,花了大约 8 个小时试图弄清楚但无法让它工作。知道怎么做吗?拜托,任何提示都会很棒。这是我的代码:

MainTabNavigator.js:

HomeScreen.js:

SecondScreen.js:

****请在下面找到我尝试过的事情:****

HomeScreen.js:当我这样做时,它首先接收它,然后传递 null

MaintTabNavigator.js:当我这样做时,它首先接收它,然后传递 null

我也尝试了其他 5 种方法,但我现在都不记得了。我不想在第二个屏幕中再次调用我的数据库来获取用户信息。我认识的人都不知道反应或反应本机。https://reactnavigation.org/docs/en/stack-navigator.html上的 React Native 文档充其量是最少的,仅显示以下内容:

即使您转到文档中的示例并搜索“screenprop”一词,您也不会在任何一个示例中看到任何有关屏幕道具功能的提及。我看到的所有问题都只解决了如何在按钮点击时传递道具,这很容易。我正在尝试做的事情可能吗?我敢肯定,我不是唯一一个使用标签导航器在主屏幕中检索数据并需要将其传递到其他屏幕的人。任何建议都有帮助。谢谢。

附言。这是调用主屏幕的登录类:

0 投票
1 回答
3276 浏览

react-native - react-navigation标签导航器特定标签按钮的自定义导航操作

我想从选项卡上的特定按钮打开抽屉(例如选项菜单),而不是导航到屏幕。我目前的解决方案是在 react-navigation v2 上工作,但是当我们从 v2 升级到 react-navigation 的 v3 和从 v57 升级到 react-native 的 v60 时,该解决方案已经停止工作。

选项卡栏中的菜单选项卡按钮分配了一个虚拟屏幕,我正在使用tabBarOnPress(). 该方法打开抽屉,如果它与菜单按钮的路由名称匹配,则返回,否则它会导航。似乎选项卡导航器正在导航到虚拟屏幕,无论我分配什么方法tabBarOnPress()并且该方法也被调用。

以下是在 v2 中运行良好但在 v3 中停止运行的当前代码:

0 投票
3 回答
805 浏览

react-native - 我怎样才能创建这样的标签栏?有样品吗?

我如何在本机反应中创建这样的标签栏?

谷歌任务标签栏

有没有这样的样品?

0 投票
2 回答
2388 浏览

react-native - this.props.navigation.setParams() 不会更新之前传递的导航参数

我在我的 react-native 项目中使用 a ,并分别TabNavigator通过 和 在屏幕之间传递一些数据。问题是这种方法对我有用,仅当我第一次发送该数据时,第二次尝试发送数据时,离开屏幕时数据不会更新this.props.navigation.setParams()this.props.navigation.getParam()navigation.state.params

下面是负责接收和发送数据的代码片段