关键词：
【中文标题】使用抽屉导航在反应本机导航中导航时屏幕冻结【英文标题】：Screen freeze when navigate in react native navigation with Drawer navigation 【发布时间】：2021-04-27 11:23:58 【问题描述】：我在 React Native Navigation 中遇到了抽屉导航问题。
问题似乎很简单。
我有 2 个屏幕，每个屏幕上都有一个按钮，可以将用户发送到另一个屏幕。
问题是在将用户从屏幕 A 发送到 B 以及从 B 发送到 A 之后，按钮不再起作用。
我可以拉抽屉再回到B屏，Button在那里工作，但是A屏中的按钮仍然冻结，基本上是洞屏。
import React from "react";
import createDrawerNavigator from "@react-navigation/drawer";
import SettingScreen from "../screens/SettingScreen";
import ProfileScreen from "../screens/ProfileScreen";
const Drawer = createDrawerNavigator();
function MenuNavigation(props)
return (
<Drawer.Navigator>
<Drawer.Screen name="Setting" component=SettingScreen />
<Drawer.Screen name="Profile" component=ProfileScreen />
</Drawer.Navigator>
);
export default MenuNavigation;这是其中一个屏幕，另一个是相同的，只是名称不同
import React from "react";
import Button, Text, View from "react-native";
function SettingScreen( navigation )
return (
<View style= flex: 1, justifyContent: "center", alignItems: "center" >
<Text>Hello world</Text>
<Button
title="Go to Profile Screen"
onPress=() => navigation.navigate("Profile")
/>
</View>
);
export default SettingScreen;类似于设置屏幕我有一个配置文件屏幕，但我没有包括在内。
import React from "react";
import NavigationContainer from "@react-navigation/native";
import MenuNavigation from "./MenuNavigation";
function MainNavigation(props)
return (
<NavigationContainer>
<MenuNavigation />
</NavigationContainer>
);
export default MainNavigation;最后，这是我的 package.json 文件，是的，我正在使用 EXPO
"main": "node_modules/expo/AppEntry.js",
"scripts":
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
,
"dependencies":
"@expo-google-fonts/roboto": "^0.1.0",
"@react-native-community/checkbox": "^0.5.7",
"@react-native-community/datetimepicker": "3.0.4",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.2",
"@react-navigation/drawer": "^5.12.2",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"expo": "~40.0.0",
"expo-checkbox": "~1.0.0",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"moment": "^2.29.1",
"native-base": "^2.15.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-hook-form": "^6.14.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-action-button": "^2.8.5",
"react-native-gesture-handler": "~1.8.0",
"react-native-modals": "^0.22.3",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.15.2",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"redux-connect": "^10.0.0",
"redux-thunk": "^2.3.0"
,
"devDependencies":
"@babel/core": "~7.9.0"
,
"private": true
no Error no nothing，根本行不通。
如果有人需要更多细节，可以问我。
【问题讨论】：
我也有同样的问题。我看到有一个与此相关的提交，尽管我不是 100% 确定这一点。 github.com/react-navigation/react-navigation/commit/…. 哦，哇，我正要问这个，谢谢 OP！ 这应该是github问题 @AniruddhaPandey 是的，我相信这必须解决。因为官方文档中的示例之一不再正常工作。 【参考方案1】：React-Navigation/drawer 版本 5.12.3 解决了这个问题：
https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fdrawer%405.12.3
【讨论】：
【参考方案2】：我有同样的问题，所以我尝试降级到抽屉@5.11.5，但没有任何改变。
我不知道为什么，但 MAN.TOGA 解决方案运行良好。
【讨论】：
【参考方案3】：似乎@react-navigation/drawer 的最新版本5.12.2 有这个问题。所以我尝试使用旧版本5.11.5，它对我有用。
不过，我只在安卓手机上进行了测试。
安装特定 npm 打包器版本的命令是：yarn add @react-navigation/drawer@5.11.5
【讨论】：
【参考方案4】：我今天也遇到了同样的问题。我不知道你是否已经找到了解决方案，但我一直在搞乱图书馆并找到了一个随机的快速修复。我什至不明白它是如何工作的，而且我是 React 的新手。 也许您可以尝试进一步研究。
所以我将 react-navigation/drawer/src/DrawerView.tsx 中 ResourceSavingScene 组件的不透明度更改为始终为 1。
<ResourceSavingScene
key=route.key
/*style=[StyleSheet.absoluteFill, opacity: isFocused ? 1 : 0 ]*/
style=[StyleSheet.absoluteFill, opacity: 1 ]
isVisible=isFocused
enabled=detachInactiveScreens
>
它似乎有效（我已经使用 android 模拟器进行了测试）但正如我所说我仍然不明白它。在 android 模拟器中检查元素让我很困惑这个组件样式的行为。
【讨论】：
谢谢这对我也有用，但是这个问题没有永久的解决方案吗？ 貌似包已经更新，作者已经修复了问题。 5.12.3 版应该可以正常工作。如何在本机反应中调用函数内部的抽屉导航器
】如何在本机反应中调用函数内部的抽屉导航器【英文标题】：Howtocalldrawernavigatorinsidefunctioninreactnative【发布时间】：2022-01-0507:25:55【问题描述】：我是React-native的新手。所以我对导航了解不多。当我单击我的图像时，我需要打... 查看详情
导航标题未隐藏在本机反应中
...题描述】：我们在我们的reactnative应用程序中显示导航侧抽屉。所以，在那，对于特定的屏幕，我们必须禁用手势。对于完整的应用程序，我们也隐藏了导航标题。MyStack.navigationOptions=(navigation)=>letdrawerLoc 查看详情
如何在抽屉导航器中的屏幕反应导航中设置自定义边框半径和 zIndex？
...gator?【发布时间】：2021-11-1115:07:27【问题描述】：我正在使用react-navigationv6.1进行抽屉导航，我正在尝试实现以下功能：目前这是我能够实现的目标：如何为用户导航的 查看详情
屏幕无法在本机反应中导航
】屏幕无法在本机反应中导航【英文标题】：Screennotnavigatinginreactnative【发布时间】：2017-02-0403:44:06【问题描述】：我在reactnative中编写了这段代码，用于从一个屏幕导航到另一个屏幕，但页面似乎没有导航！我回到同一个启动... 查看详情
从左到右反应本机抽屉导航拖动抽屉不起作用
】从左到右反应本机抽屉导航拖动抽屉不起作用【英文标题】：reactnativedrawernavigationdragdrawerfromlefttorightdidn\'twork【发布时间】：2019-08-0408:18:33【问题描述】：抽屉导航有问题。我不能从左到右拖动抽屉，当我用按钮打开抽屉时，... 查看详情
反应本机导航：无法导航到堆栈中的顶部屏幕
】反应本机导航：无法导航到堆栈中的顶部屏幕【英文标题】：Reactnativenavigation:Unabletonavigatetothetopscreeninthestack【发布时间】：2021-06-1813:49:08【问题描述】：我当前的导航是这样的顶层堆栈登录屏幕主应用程序堆栈首页堆栈搜索... 查看详情
当用户按下后退按钮时隐藏导航抽屉
...here创建了一个抽屉式导航。目前，一切正常，除了用户使用Android在屏幕底部提供的本机后退按钮（以及主页和最近使用的应用程序按钮）。如果用户使用本机返回按钮向后导航，导航抽屉仍将打开。如果用户使用A 查看详情
如何使用 useNavigation() 在与 typescript 的本机反应中导航到屏幕
】如何使用useNavigation()在与typescript的本机反应中导航到屏幕【英文标题】：HowtonavigatetoascreenusinguseNavigation()inreactnativewithtypescript【发布时间】：2021-09-1313:18:15【问题描述】：我想使用useNavigation导航到屏幕。以下是我的代码：Main... 查看详情
如何在本机反应中转到顶部选项卡导航中的另一个屏幕
】如何在本机反应中转到顶部选项卡导航中的另一个屏幕【英文标题】：Howtogotoanotherscreenintoptabnavigationinreactnative【发布时间】：2021-02-2315:17:39【问题描述】：我想退出顶部标签导航，但无法导航。它给出错误有效载荷"name":"Login... 查看详情
如何在本机反应中隐藏特定屏幕上的底部导航栏？
...ative?【发布时间】：2019-11-0619:26:41【问题描述】：我正在使用ReactNative和ReactNativeNavigation来构建我的应用程序。目前，我有三个底部标签：主页、上传视频和消息。选择“上传视频”选项卡后，我想渲染“上传视频”组件并仅在 查看详情
导航抽屉和工具栏出现在初始屏幕中
...screen【发布时间】：2020-01-3102:20:18【问题描述】：我正在使用带有导航抽屉和工具栏以及启动屏幕的喷气背包导航构建应用程序。我将启动画面片段设置为入口目的地。但是，当启动画面启动时，抽屉和工具栏会出现在屏幕上。... 查看详情
在侧面反应导航标签栏？
...:58:15【问题描述】：我正在制作一个应用程序，我们正在使用ReactNavigation。我知道标签栏有放置在屏幕顶部和底部的选项......但是有没有办法将它放在屏幕的一侧（并让选项垂直显示）？在我的脑海中，我希望这适用于较大的平... 查看详情
TextInput 在本机反应中不起作用我将它与堆栈导航一起使用
】TextInput在本机反应中不起作用我将它与堆栈导航一起使用【英文标题】：TextInputnotworkinginreactnativeIamusingitwithstacknavigation【发布时间】：2021-05-1505:17:21【问题描述】：所以我正在尝试制作OTP身份验证流程。我在phoneInput屏幕上输... 查看详情
反应屏幕之间的本机导航
...【发布时间】：2021-10-0718:43:02【问题描述】：我正在尝试使用reactnavigation.org库，但对此我有一些问题。我有两种类型的导航屏幕。两个屏幕是注册和授权。其他是常规的应用程序屏幕。问题是我无法渲染父组件App.js或其他功能... 查看详情
在抽屉导航器中卸载或重新渲染屏幕(代码片段)
...用户从Post回到Home时，将卸载post。单击另一个帖子时再次使用新数据重新安装。我的问题是，通过实现抽屉，导航屏幕在导航回家时没有卸载，我不断地获得相同的道具和第一个帖子的屏幕打开，一遍又一遍。这是我的路线设置... 查看详情
如何使用反应原生导航 v2 添加侧边栏抽屉？
】如何使用反应原生导航v2添加侧边栏抽屉？【英文标题】：Howtoaddsidebardrawerwithreactnativenavigationv2?【发布时间】：2019-01-0301:54:24【问题描述】：使用react-native-navigationv1，您可以像这样设置抽屉：drawer:left:screen:\'ScreenName\'在react-na... 查看详情
在地图功能中反应本机导航
...【发布时间】：2022-01-2117:55:32【问题描述】：我正在尝试使用ReactNative中的Map函数从JSON数据生成卡片。我希望能够通过单击此卡片导航到另一个页面。这是我正在尝试的解决方案：functiondisplay()returnrestaurant.map((item)=>return(< 查看详情
无法通过反应本机导航导航到有条件地设置屏幕
】无法通过反应本机导航导航到有条件地设置屏幕【英文标题】：CannotnavigatetoconditionallysetScreenwithreactnativenavigation【发布时间】：2021-07-2523:23:42【问题描述】：我对本机反应相当陌生，可能是我的代码设置不佳，但是，我有条件... 查看详情