对于某些 Android 用户，React Native 应用程序中的抽屉菜单会冻结

Question

我的 React Native 应用程序中的抽屉菜单遇到问题。一些使用 Android 设备的用户报告菜单卡住并且无法导航。我已经使用 @react-navigation/drawer 库实现了菜单。以下是我的导航设置的相关代码：

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

function NavegationDrawerApp() {
  return (
    <Drawer.Navigator
      drawerContent={props => <CustomDrawer {...props} />}
      initialRouteName="Portada"
      screenOptions={{
        drawerActiveBackgroundColor: '#eb4947',
        drawerActiveTintColor: '#fff',
        drawerInactiveTintColor: '#000',
        headerTintColor: '#fff',
        drawerLabelStyle: {
          marginLeft: -10,
          fontSize: 15,
        },
        headerTitle: () => (
          <Image
            source={require('./assets/img/logo.jpg')}
            style={{ width: 200, height: 45, resizeMode: 'contain', borderRadius: 10 }}
          />
        ),
        headerTitleAlign: 'center',
        headerStyle: {
          backgroundColor: '#f23c38',
          borderBottomWidth: 0,
        },
      }}
    >
      <Drawer.Screen
        name="Portada"
        component={Main}
        options={{
          drawerIcon: ({ color }) => <Ionicons name="trending-up" size={22} color={color} />,
          menu: true,
        }}
      />
      {/* Other Drawer.Screen components */}
    </Drawer.Navigator>
  );
}

return (
  <>
    {!mantenimiento ? (
      storage ? (
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName="NavegationDrawerApp"
            screenOptions={{
              headerShown: true,
              headerTitleAlign: "center",
              headerTitleStyle: { fontSize: 18, fontWeight: "bold" },
              headerStyle: { borderBottomWidth: 1, borderBottomColor: "black" },
            }}
          >
            <Stack.Screen
              name="-"
              component={NavegationDrawerApp}
              options={{ headerShown: false }}
            />
            {/* Other Stack.Screen components */}
          </Stack.Navigator>
          <StatusBar style="light" />
        </NavigationContainer>
      ) : null
    ) : null}
  </>
);

这是我的package.json：

{
  "name": "app",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/stack": "^6.3.17",
    "expo": "^49.0.9",
    "expo-constants": "~14.4.2",
    "expo-device": "~5.4.0",
    "expo-font": "~11.4.0",
    "expo-linking": "~5.0.2",
    "expo-notifications": "~0.20.1",
    "expo-router": "^2.0.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.17",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-icons": "^4.11.0",
    "react-native": "0.72.6",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-progress-steps": "^1.3.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^10.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.15"
  },
  "private": true
}

我已附上显示问题的屏幕截图错误屏幕截图

有人遇到过类似问题或对如何解决这个问题有建议吗？

提前谢谢您！

在不同的 Android 设备和模拟器上进行测试。 检查代码是否存在潜在问题。