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

Question

我在 React Native Navigation 中遇到抽屉导航问题。

问题好像很简单

我有 2 个屏幕，每个屏幕上都有一个按钮，可以将用户转到另一个屏幕。

问题是在将用户从屏幕 A 发送到 B 以及从 B 到 A 之后按钮不再起作用。

我可以拉下抽屉，重新回到B屏，Button在那里工作，但是A屏的button还是卡住了，挖孔屏基本没问题。

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
}

没有错误没有什么，根本不起作用。

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

Answer 1

我今天运行遇到了同样的问题。我不知道您是否已经找到解决方案，但我一直在研究图书馆并找到了一个随机的快速修复方法。我什至不明白它是如何工作的，而且我是 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 模拟器中检查元素让我对这个组件样式的行为感到困惑。

Answer 2

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

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

Answer 3

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

我不知道为什么，但是 MAN.TOGA 解决方案工作正常。

Answer 4

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

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

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

Screen freeze when navigate in react native navigation with Drawer navigation

react-native

navigation-drawer

react-native-navigation