React Navigation 6：标题与页面滑动方向相反，如何解决？

你设置gestureDirection: 'horizontal-inverted'反转页面滑动方向后，默认头部标题的动画逻辑没同步更新，所以会出现视觉怪异的情况。下面两种方案可以解决这个问题：

方法一：自定义Header Title组件，同步动画方向 #

利用导航提供的动画状态参数，手动控制标题的平移方向，让它和页面滑动逻辑匹配：

import { useNavigation } from '@react-navigation/native';
import { Animated } from 'react-native';

// 自定义标题组件
const CustomHeaderTitle = ({ title }) => {
  const navigation = useNavigation();
  // 获取页面过渡的动画进度值
  const progress = navigation.useAnimationState().progress;

  // 反转标题的平移动画方向，对应左滑从左到右的入场逻辑
  const translateX = progress.interpolate({
    inputRange: [0, 1],
    outputRange: [100, 0], // 默认是[-100, 0]，这里反转后适配反向手势
  });

  return (
    <Animated.Text style={{ ...styles.headerTitleStyle, transform: [{ translateX }] }}>
      {title}
    </Animated.Text>
  );
};

// 在Stack.Screen中替换默认标题为自定义组件
<Stack.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
        headerTitle: () => <CustomHeaderTitle title="Settings" />,
        headerTitleStyle: styles.headerTitleStyle,
        headerShown: true,
        gestureDirection: 'horizontal-inverted',
        headerLeft: () => <BackButton />
    }}
/>

方法二：修改Header全局动画配置 #

通过headerStyleInterpolator覆盖默认头部动画逻辑，让整个头部（包括标题、返回按钮）的动画方向和手势同步：

<Stack.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
        headerTitle: 'Settings',
        headerTitleStyle: styles.headerTitleStyle,
        headerShown: true,
        gestureDirection: 'horizontal-inverted',
        headerLeft: () => <BackButton />,
        // 自定义头部样式插值器，反转所有元素的动画方向
        headerStyleInterpolator: ({ current, layouts }) => {
          return {
            headerTitleStyle: {
              opacity: current.progress,
              transform: [
                {
                  translateX: current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [layouts.screen.width * 0.5, 0],
                  }),
                },
              ],
            },
            headerLeftStyle: {
              opacity: current.progress,
              transform: [
                {
                  translateX: current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [-50, 0],
                  }),
                },
              ],
            },
          };
        },
    }}
/>

补充说明 #

• 方法一针对性更强，只调整标题动画；方法二可以统一协调头部所有元素的动画，视觉一致性更好。
• 可以根据实际需求调整outputRange里的数值，让动画偏移量更自然。

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