React Navigation goBack()导致Pressable组件短时间无法响应的问题

你的问题是React Navigation在执行goBack()的返回转场动画期间，默认会暂时锁定前一页面（HomeScreen）的交互，防止动画过程中重复触发导航操作导致异常，所以按钮会出现短时间无法点击的延迟。以下是几种可行的解决方案：

方案1：缩短转场动画时长 #

通过自定义transitionSpec减少动画持续时间，从而缩短交互锁定的时长，用户几乎感知不到延迟：

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator screenOptions={{
            headerShown: false,
            gestureEnabled: true,
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            // 添加转场时长配置
            transitionSpec: {
              open: {
                animation: 'timing',
                config: { duration: 200 } // 默认300ms，缩短到200ms
              },
              close: {
                animation: 'timing',
                config: { duration: 200 }
              }
            }
          }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

方案2：允许动画被中断 #

设置interruptionBehavior为replace，这样在返回动画执行过程中点击按钮，会立即中断当前动画并触发新的导航操作：

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator screenOptions={{
            headerShown: false,
            gestureEnabled: true,
            gestureDirection: 'horizontal',
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            // 允许动画被中断
            interruptionBehavior: 'replace'
          }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

方案3：禁用转场动画（不推荐） #

如果可以接受无动画的导航效果，直接关闭动画即可彻底消除交互锁定：

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator screenOptions={{
            headerShown: false,
            gestureEnabled: true,
            gestureDirection: 'horizontal',
            animationEnabled: false // 关闭转场动画
          }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

注：你之前尝试的navigation.goBack(null)无效，是因为该问题并非页面重渲染导致，而是转场动画的交互锁定机制造成的。

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