问题标签 [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 投票
1 回答
3978 浏览

react-native - React Native(React Navigation)使用将数据从一个屏幕传递到另一个屏幕

我有一个使用Ignite CLI. 我正在尝试将 TabNavigator 与 React Navigation 一起使用,但我似乎无法弄清楚如何将数据从一个屏幕传递到另一个屏幕。我见过的所有示例通常都显示了如何在点击按钮并使用该onPress功能时传递数据,但在我的情况下,当我实际点击其中一个选项卡按钮时,我需要/想要传递数据,而我还没有找到一个关于如何做到这一点的解释,至少我理解的一个。

我有两个用户将与之交互的屏幕SearchScreenWatchScreen. 这两个屏幕由AppNavigation.js文件中的 TabNavigator 控制。所以一共有3个文件AppNavigation.jsSearchScreen.jsWatchScreen.js.

AppNavigation.js

SearchScreen获取一些数据并将其保存在一个数组中,我也需要这些数据WatchScreen。通常我会将数据作为道具传递给 WatchScreen,但是使用 TabNavigator 我看不到如何执行此操作,因为它不是SearchScreen. 在 `SearchScreen 中相关的部分是这个

this.state.movies是我需要在我的 中可用的,我WatchScreen怎样才能使它在我点击Watch标签栏中的按钮时可用?

我读过的东西表明每个组件都以或Screen的形式传递导航道具,这就是我将数组传递给我的方式吗?如果是这样,&似乎没有被传递到我的 WatchScreen。this.props.navigationthis.props.screenPropsmoviesWatchScreenthis.props.navigationthis.props.screenProps

0 投票
1 回答
214 浏览

android - CreateTabBottomNavigator 和滑动手势。刷卡很慢,为什么?

我有一个我无法解决的问题。

我有一个createBottomTabNavigator3 页的“”。

在一个页面上,我有一个ListView从中获取数据的页面AsyncStorage。我的意图是,我可以删除一行(可以正常工作)并编辑一行(也可以正常工作)。我的问题是“删除”和“编辑”按钮将显示为在行上向左/向右滑动。这种滑动有效,但真的很糟糕而且很慢。

我使用名为“react-native-swipe-list-view”的第 3 方组件。我还测试了其他 3 个组件,它们都工作得非常糟糕。

是否有可能是问题所在bottomTabNavigator?导航器有没有一种滑动功能,这就是一切都缺乏的原因?

也许有人有同样的问题并有解决方案。

0 投票
1 回答
583 浏览

react-native - 如何使用 react-navigation 和 react native 制作如图所示的标签栏?

如何使用 react-navigation 和 react native 制作如图所示的标签栏?如图所示,如何做圆形标签菜单?我应该使用 react-native-svg 路径吗?

图片在这里

我试过这段代码:

我的风格代码:

0 投票
1 回答
1113 浏览

react-native - 在 createStackNavigator 中更改背景颜色的问题..?

我是反应原生的新手。我想更改 tabLayout 中的背景颜色。我的代码在这里:

MainTabNavigator.js

我不知道我应该在哪里更改我的代码。

0 投票
1 回答
649 浏览

react-native - 带有底部标签栏导航的 React-native-router-flux 导航俱乐部抽屉

尽管有很多关于 react-native-router-flux 和抽屉导航的线索,但我似乎无法弄清楚如何将现有的底部标签栏导航与侧抽屉结合起来。

我目前拥有的路线

所以发生的事情是我在应用程序启动时加载登录屏幕,然后在成功登录时我只需调用由底部选项卡栏加载的 Actions.bottombar() ,我已经使用TabNavigatorfromreact-native-tab-navigator 选项卡切换完美地工作,没有任何问题。

现在我想添加更多屏幕并且添加更多选项卡不是一个选项,因为我已经有 5 个选项卡。所以我想实现侧抽屉。而且我无法弄清楚如何配置我的路线,以便在成功登录时,除了侧抽屉之外,我继续保持底部标签栏完好无损。侧边抽屉将有更多的屏幕导航选项转到我尝试添加的各个屏幕

到我现有的路线,但没有任何反应。我尝试了太多的事情,但都失败了。

请求一些帮助。非常感谢任何解决此问题的帮助和指示。

谢谢,维克拉姆

0 投票
2 回答
7522 浏览

react-native - 用 DrawerNavigator 反应原生 BottomTabNavigator,如何让底部导航器始终可见

我已经浏览了 SO 和 github 上关于反应导航的各种帖子,但其中大多数是反应原生堆栈导航器与抽屉导航器的组合。我找不到任何可以帮助解决我的问题的东西。

我想做的是我有一个带有五个屏幕的底部标签栏,可以很好地加载正确的数据,我想添加一个抽屉导航器以提供更多屏幕并具有不同的数据。我已经设法在标签导航器的顶部构建了抽屉导航器,但是当抽屉打开时,它与底部标签栏重叠,因此只要抽屉打开,底部标签导航就没有用了。在抽屉导航器下添加选项卡也会显示Tabs为抽屉菜单中的选项之一。

我想要实现的是,1. 底部标签导航始终可见。2. 当抽屉打开时,抽屉菜单打开并且不重叠底部标签栏。3.抽屉菜单应该只有那些可以从抽屉菜单导航的屏幕。

下面是我的导航代码,

有人可以帮我吗?

谢谢,维克拉姆

0 投票
1 回答
777 浏览

react-native - 如何将道具传递给BottomTabNavigator中的函数

我在 SO 中进行了相当多的搜索,但没有找到解决我问题的有效方法,

问题陈述:我有带有 5 个选项卡的 BottomTabNavigator。每次我切换标签时,我都需要调用 api 来获取最新信息。为了获取最新信息,我需要拥有我需要用来进行 api 调用的 redux 存储值。那么如何使这些 redux 存储值在我在 tabChange 上进行的函数调用中可用?

下面是我需要调用的函数,然后是 BottomTabNavigator,

非常感谢任何帮助,我对此感到很困惑。我已经尝试了上面注释掉的部分,并且它抛出jumpToIndex is not a function 了另一个选项没有 redux 存储值。

请帮忙。:(谢谢,维克拉姆

0 投票
2 回答
307 浏览

reactjs - 使用 DrawerNavigator 和 BottomTabNavigator 如何放置 DrawerIcon

我将我的主菜单与 DrawerNavigator 一起使用。在屏幕内,我使用 BottomTabNavigator。

我把每个屏幕的 DrawerIcon 是这样的:

但是,在我使用 TabNavigator 的屏幕中,我没有导出类,而是导出 createBottomNavigator,如下所示:

我不知道DrawerNavigator 的navigationOptions 放在哪里!

请帮忙!泰

0 投票
1 回答
285 浏览

react-native - 如何在 React-Native 中创建自定义标签栏?

我想创建一个看起来像这样的导航栏。我尝试使用 TabNavigation,但它看起来不像这样。我不知道它是如何定制的。

0 投票
1 回答
2730 浏览

javascript - 在反应本机选项卡导航器的屏幕之间传递对象

我有一个底部标签栏导航器,并有 3 个屏幕。在菜单屏幕中,我试图选择一个菜单项,然后在选项卡导航器的第二条路线的购物车屏幕中显示所选的菜单项。这是我的标签导航器

我在按钮的 onPress 函数中有一个菜单项对象,如下所示:

并在同一个 onPress 函数中将其分配给 MenuScreen 的 menuItem 对象。

并成功地在属于菜单屏幕的模式中渲染它,但我也想在购物车屏幕中渲染它。

但是,我将如何从购物车屏幕到达该对象?该项目有很多代码和屏幕,所以我只复制了相关部分。