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

Question

我在 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，根本行不通。

如果有人需要更多细节，可以问我。

Answer 1

React-Navigation/drawer 版本 5.12.3 解决了这个问题：

https://github.com/react-navigation/react-navigation/releases/tag/%40react-navigation%2Fdrawer%405.12.3

Answer 2

我有同样的问题，所以我尝试降级到抽屉@5.11.5，但没有任何改变。

我不知道为什么，但 MAN.TOGA 解决方案运行良好。

Answer 3

似乎@react-navigation/drawer 的最新版本5.12.2 有这个问题。所以我尝试使用旧版本5.11.5，它对我有用。 不过，我只在安卓手机上进行了测试。

安装特定 npm 打包器版本的命令是：
yarn add @react-navigation/drawer@5.11.5

Answer 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 模拟器中检查元素让我很困惑这个组件样式的行为。