React Native 0.65栈+抽屉导航安卓端返回卡顿页面锁定解决方法

问题现象 #

使用React Native 0.65版本，集成@react-navigation的栈导航（stack）和抽屉导航（drawer）时，iOS端运行完全正常，安卓端正向导航操作流畅，但返回上一页面时会出现页面锁定无响应、导航速度极慢的问题。

相关依赖版本 #

"react-native": "0.65.1"
"@react-native-community/cli": "^6.0.0",
"@react-native-masked-view/masked-view": "^0.2.6",
"@react-navigation/drawer": "^6.1.4",
"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.7",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.3.0-alpha.3",
"react-native-screens": "^3.7.2"

原有配置代码 #

导航配置代码 #

<NavigationContainer>
 <Stack.Navigator
      screenOptions={{
        gestureEnabled: false,
      }}>
      {NoAuth.map(drawer =>
        drawer.name === 'login' ? (
          <Stack.Screen
            name={drawer.name}
            options={{
              headerShown: false,
            }}
            key={drawer.name}
            component={LoginScreen}
          />
        ) : (
          <Stack.Screen
            name={drawer.name}
            options={{title: drawer.title}}
            key={drawer.name}
            component={
              drawer.name === 'reset'
                ? ResetPassword
                : drawer.name === 'config'
                ? ConfigConnect
                : drawer.name === 'finalConfig'
                ? FinalConfigConnect
                : null
            }
          />
        ),
      )}
    </Stack.Navigator>
   </NavigationContainer>

app.js入口配置 #

import 'react-native-gesture-handler';

修复方案 #

该问题由安卓端导航动画渲染异常导致，只需在Stack.Screen的options配置中添加animationEnabled: false即可解决，示例代码如下：

<Stack.Screen
            name={drawer.name}
            options={{
              headerShown: false,
              animationEnabled: false,
            }}
            key={drawer.name}
            component={LoginScreen}
          />

若需要全局关闭导航动画，也可直接在Stack.Navigator的screenOptions中统一配置该参数，无需单独给每个Stack.Screen设置。

内容的提问来源于stack exchange，提问作者JordiM