打开时反应抽屉导航滞后答案

【问题标题】：React drawer Navigation lags while opening打开时反应抽屉导航滞后
【发布时间】：2022-08-18 23:02:43
【问题描述】：

我在堆栈导航器的顶部嵌套了一个抽屉导航。它可以工作，但问题是它在打开抽屉时过度滞后。这里可能是什么问题？

import React, { useEffect, useState } from \"react\";
import CartIcon from \"../CartIcon\";
import Home from \"../../screens/Home\";
import Orders from \"../../screens/Orders\";
import ProductsScreen from \"../../screens/ProductsScreen\";
import Cart from \"../../screens/Cart\";
import { createNativeStackNavigator } from \"@react-navigation/native-stack\";
import HomeHeader from \"../HomeHeader\";
import OrdersDetails from \"../../screens/OrdersDetails\";
import { createDrawerNavigator } from \"@react-navigation/drawer\";
const Drawer = createDrawerNavigator()
const Stack = createNativeStackNavigator();

我的抽屉导航器在这里

 const HomeScreen=()=> {
 return (
<Drawer.Navigator>
  <Drawer.Screen name=\"Home\" component={Home} options={() => ({
      title: \"BarPoint\",
      headerRight: () => <HomeHeader />,
    })} />
</Drawer.Navigator>
 );
 }

堆栈导航器在这里

 const AppStack = () => {
 return (
<Stack.Navigator>
  <Stack.Screen
    name=\"HomeScreen\"
    component={HomeScreen}
    options={{ headerShown: false }} 
  />
  <Stack.Screen
    name=\"ProductsScreen\"
    component={ProductsScreen}
    options={({ navigation }) => ({
      title: \"Products\",
      headerRight: () => <CartIcon navigation={navigation} />,
    })}
  />
  <Stack.Screen name=\"Cart\" component={Cart} />
  <Stack.Screen name=\"Orders\"  component={Orders} />
  <Stack.Screen name=\"OrdersDetails\"  component={OrdersDetails} />

</Stack.Navigator>
 );
};

 export default AppStack;

我在 Appstack 中移动了主屏幕功能块，延迟减少了，但仍然感觉不流畅......有什么帮助吗？
我应该将抽屉嵌套在堆栈内还是堆栈在抽屉内

标签： react-native nested navigation navigation-drawer stack-navigator

【解决方案1】：

在 Drawer.Navigator 中添加useLegacyImplementation 并编译。

const HomeScreen=()=> {
 return (
<Drawer.Navigator
useLegacyImplementation //<- Add here
>
  <Drawer.Screen name="Home" component={Home} options={() => ({
      title: "BarPoint",
      headerRight: () => <HomeHeader />,
    })} />
</Drawer.Navigator>
 );
 }

【讨论】：