问题标签 [react-navigation-v5]

我已经成功使用 React Navigation Stack (V5) 大约一周了，今天我的应用程序将无法构建，因为错误 - 现在显示无法解析模块。

错误信息

该模块的安装如我的 package.json 文件所示 -

我尝试了以下步骤来尝试解决问题 -

1. 删除了 node_modules
2. 清除 yarn 和 npm 缓存
3. 运行 npm install 再次安装依赖项
4. 清除博览会缓存
5. 在 iOS 设备上删除并重新下载 expo 应用程序
6. 还尝试再次安装反应导航堆栈包

仍然收到相同的错误消息。

非常感谢任何想法..目前我对此感到困惑：|

我使用版本 5 React Navigation。

根据React Navigation 文档，我使用replace如下

但我收到以下错误

无法读取未定义的属性“替换”

我有一个Navigation Drawer应该出现在我的所有屏幕中（屏幕除外Splash）。

我是这样的：

在这种情况下，所有正常的堆栈屏幕都充当抽屉屏幕。（屏幕只加载一次，下次显示初始加载，如博客屏幕）。‌</p>

我需要将光标放在除启动画面之外的所有页面上并堆叠我的一些页面（例如没有相同内容的动态页面）

我的提供商下有两个功能组件，

SubApp1并且SubApp2在这里，当我在渲染中增加 counter1 时SubApp1，SubApp2即使不需要重新渲染也是如此。

而当我增加 counter2 时SubApp2也在SubApp1渲染。

我知道这确实发生了，但是如何避免这种情况呢？

应用程序.js：

index.js：

在这种情况下，可以通过深度链接打开一个屏幕。有一个<BackButton />组件，我希望按钮的行为是这样的：

• 如果此屏幕由 开启navigator.navigate，则返回。
• 如果此屏幕是通过深度链接打开的，则转到主屏幕。

像这样的导航器结构

• 根（堆栈导航器）
  • 选项卡（底部选项卡导航器）
    • 家
    • 个人的
  • 主要（堆栈导航器）
    • 店铺

一开始，我写了这样的代码：

此代码有效，但是使用navigation.navigate()函数会导致推送效果（新屏幕来自右边缘），而不是返回（新屏幕来自左边缘）。

然后我尝试使用navigation.replace()和navigation.reset()

导航器似乎无法处理这条路线（我认为这是因为我们现在在Main堆栈中，它无法处理参数）。

我能做些什么来纠正导航的行为？

我正在将 React Native 应用程序从 react-navigation 4 迁移到 5.x，但我找不到哪个包包含 createSwitchNavigation。具体来说，我对身份验证令牌检查部分有疑问。

使用 react-navigation 4 我有：

然后我有一个包含 ResolveAuthScreen 组件的文件。

其余的组件对于这个疑问并不重要。我想知道如何复制相同的 Switch 导航流程。我想知道如何创建这样的东西：

我目前在一个项目中，我们将 React Navigation 5 与本机堆栈导航器一起使用，因为它提高了性能。我们需要在标题中添加一个搜索栏，因为客户不希望它出现在其他地方。有没有办法制作自定义标题？使用options={{ headerShown: false }}不是一个选项，因为在本机堆栈导航器中，我们有一个底部堆栈导航器，在这个底部选项卡导航器中，我们有一个顶部堆栈导航器，里面有屏幕。因此，在屏幕内使用headerShown: false和自定义标题只会将其呈现在顶部选项卡下方，这是不可接受的。关于如何制作这个的任何想法？正在使用带有自定义反应元素的通用堆栈导航器作为标题道具唯一的解决方案？

非常感谢有关如何解决此问题的任何想法。

我已经安装了“npm install @react-navigation/native”及其所有依赖项“npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react -native-community/masked-view”。安装后，当我构建应用程序时，它的构建成功但在我的手机上安装后崩溃了。

当我卸载依赖项 react-native-safe-area-context 时，应用程序正在运行，但假设需要使用反应导航。

我正在使用 windows 机器，在我的 android 手机上进行测试。

包.json

I am using React Navigation 5 in a project, and I'm having trouble trying to block a user from navigating back after a certain point.

The app uses a nested navigation structure similar to this:

After a successful user login, the user is sent to the Home screen and should not be able to navigate back to the LoginScreens screen.

I have tried to use the componentDidMount lifecycle method on Home, as well as the useFocusEffect hook, with the following:

• Placing a callback to React Native's BackHandler, returning true from the handler works (true means back action has been handled, no further back handlers will be called), but it will also block any back navigation within the screens in Home (e.g. I cannot navigate back from Dashboard to MyProfile).
• Using navigation.reset({ index: 1, routes: [{ name: "Home" }] }). Without index: 1 the navigation just goes back to ROOT's initialRoute (in this case, LoginScreens). With index: 1, a Maximum update depth exceeded error is thrown.
• Instead navigating directly to Home, I have tried using a navigation.reset() (note: no params, clears the entire navigation history), and after that navigate to the Home screen. This doesn't achieve the desired effect since the current route (ROOT's initialRoute, in this case: LoginScreens) is still pushed on the navigation history before navigating to Home.
• Combining navigation and reset calls in different ways, I have only managed to get JS angry and throw errors and exceptions at me.

Aaaaand... I have ran out of ideas. Does anyone have any suggestions ?

I have installed all the dependencies according to the react navigation docs.. when I copied code from docs this error occurs.. my dependencies are