使用抽屉导航在反应本机导航中导航时屏幕冻结

Posted 2023-02-16

【中文标题】使用抽屉导航在反应本机导航中导航时屏幕冻结

【英文标题】：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 版应该可以正常工作。