问题标签 [react-navigation-v6]

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

reactjs - 使用 react-router-dom v6 路由到新页面时,React 组件未呈现,无法链接到新页面

我尝试了所有可能的方法来链接到新页面,但失败了。我也尝试过使用 switch(v5)。当我尝试

我能够从我的其他页面获取内容,但它们都在底部。每次,我切换到新页面,内容都在底部带有上面的代码。但是使用第一个代码,我什至没有从其他页面获取内容,链接更改而没有提供任何内容。

0 投票
2 回答
39 浏览

react-native - react-native v6 中 NavigationActions 的替代方案

我有问题,即此代码中的导航不起作用:

“注册”功能成功地将我的数据发送到 mongodb 中的数据库。但在此之后创建下一个文件以帮助我的导航工作。但是在 ReactNative v4 中使用了“NavigationActions”。我需要更改我的代码以使用 RN v6。以下代码粘贴在下面:

两个文件相互引用。

总而言之,我尝试了使用 navigation.navigate("MyScreen") 的解决方案,但它在注册功能中不起作用。问题是如何更改第二个文件以使用 RN6 或如何在没有第二个文件的情况下在此功能中成功导航?

0 投票
0 回答
74 浏览

react-native - 如果标题太长,反应导航 6 headerRight 会被截断

我将我的应用程序更新为 React Navigation 6。在我的所有屏幕中,我自定义了headerBackImage,并添加了一些headerRight带有文本的内容。在 React Navigation 5 中,如果headerTitle太长,它会被直接截断,并在标题末尾添加 ...,如下所示:

在此处输入图像描述

但是在 React 导航 6 中,这个特性看起来发生了变化。我添加了一些 backgroundColor 来向您展示 Header 的切割:

在此处输入图像描述

我看到了那个话题:React Native Navigation Header title too long, end up overflowing,但可能V6中增加了一个新的道具。

这是我的屏幕:

有人在 RN V6 中遇到过吗?

0 投票
1 回答
110 浏览

javascript - 找不到路由对象。您的组件是否在导航器的屏幕内?反应原生

我正在使用堆栈导航器在本机反应中开发一个多页应用程序。在导航到不同的页面时,我可能会/可能不会传递数据,但在某些情况下,比如“聊天”,我确实会传递在中定义的userB数据,因此为了将my更改为displayName,我创建了一个它的自定义组件并作为道具传递给. 下面是代码:ChatScreenStackNavigatorHeaderChatScreenuserBheaderTitleStack.Screen

现在,在其他组件中,我将一些数据传递给Chat屏幕:

现在,在导航到Chat我将userB数据传递到Chat屏幕时,我在ChatHeader组件中获得了以下详细信息:

错误:

当我传入时propsStack.Screen options={{headerTitle: (props) => <ChatHeader {...props} />}}这样可以确保我应该能够继承ChatHeader传递给Chat屏幕组件的数据,对吗?但事实并非如此...

有人能帮我吗?

谢谢!

0 投票
1 回答
49 浏览

react-native - 如何在 react-navigation-6 中重构“createSwitchNavigator”代码?

下面是使用 react-navigation 版本 4 的代码。但在版本 6 中 createSwitchNavigator 已完全删除。如何重构以下代码以使其工作?我不想使用 react-native-compat 包。

0 投票
1 回答
22 浏览

react-native - react-navigation:如何隐藏 TabBar 顶部的行

我是 React-Native tyro,当我尝试自定义 Tab-Navigation 时,我发现这条线我无法隐藏它(那条白线!)。

图片

我试图设置borderColor:'00000000',但它没有工作
请帮助我。

==================================================== ==============================

这是我的代码

0 投票
2 回答
291 浏览

react-native - 导航回屏幕时不调用useEffect - React Navigation

我有一个屏幕调用 api 来获取一些数据,然后显示

我看到的一个问题是,当我离开屏幕(我使用的是 react-navigation 6.x)然后返回它时useEffect()不会被调用

从我到目前为止所阅读的内容来看,这取决于userId不改变的价值(我认为我需要围绕useEffect()钩子做更多的阅读才能更好地理解,也许有人会帮助解决这个问题)

所以在我的场景中,我在屏幕 1 上(在这里我可以创建一个事件,请求获取所有事件类型并将它们加载到选择菜单中)

当我导航到屏幕 2(以创建事件类型)然后返回屏幕 1 时,useEffect()不会调用挂钩导致无法看到我刚刚创建的事件类型(希望这是有道理的).. 还请注意,任何之前在屏幕 1 中输入的数据仍然保留

我遇到了这篇似乎是我正在处理的帖子,只是有点不确定如何使用我的设置来实现

当我返回时,如何确保 Screen 2 进行 api 调用并且清除所有以前的表单数据?

谢谢

0 投票
1 回答
45 浏览

react-native - React Native 内置 Modal 在返回屏幕时不可见

我对这段代码有点困惑,我有两个屏幕,MainScreenFeedScreen里面NativeStackNavigatorinitialScreenName(将首先路由/渲染的屏幕)在哪里MainScreen

我有一个嵌套在里面的MainScreen模态,在模态里面有一个按钮可以导航到FeedScreen,在导航到 时FeedScreenModal是可见的,但在返回时MainScreenModal不再可见,甚至在单击“显示模态”按钮后无法打开...

可见Modal性由state变量控制,这也是正确的,但仍然Modal不可见......

请指出这里发生了什么,因为根据我的说法,从...Modal回来时应该是开放的MainScreenFeedScreen

这是代码...

0 投票
0 回答
27 浏览

react-native - Material Top Tabs Navigator(REACT NATIVE)上的颜色过度滚动问题

我要删除的行为

您好,当您在应用程序上进行过度滚动时,我想在屏幕一侧移除此颜色。

我正在使用 Material Top Tabs Navigator | React Navigation 在这个小吃中你可以看到它:

https://snack.expo.dev/9KWHsFPgK

谢谢。

0 投票
0 回答
13 浏览

react-native - React-native 动画仅在底部标签栏的初始屏幕渲染上运行

升级react-navigation到后v6,我在标签栏项目上的自定义动画只运行一次(最初呈现屏幕时),我不知道为什么。

标签栏组件:

动画标签项:

在此处输入图像描述

活动项目应该向上滑动,非活动项目应该向下滑动,但动画在初始渲染后消失,如上面的 gif 所示。