如何在React Navigation Stack Navigator实现左滑渐进式切换下一页？

原生支持情况 #

React Navigation的Stack Navigator原生不支持这种左滑触发下一页渐进式覆盖的手势效果——默认栈导航的左滑手势是用于返回上一页，方向和逻辑均与你需求相反。

实现方案 #

1. 结合react-native-gesture-handler与自定义动画 #

这是最灵活的实现方式，通过监听手势拖动进度，实时控制下一页的位置与透明度：

步骤1：安装依赖

npm install react-native-gesture-handler react-native-reanimated

注意：Reanimated版本需与当前React Navigation版本兼容，建议参考官方文档匹配版本。

步骤2：屏幕组件内实现手势与动画

import { View, Text, Dimensions } from 'react-native';
import { PanGestureHandler, GestureHandlerRootView } from 'react-native-gesture-handler';
import Animated, { 
  useAnimatedGestureHandler, 
  useSharedValue, 
  useAnimatedStyle, 
  interpolate 
} from 'react-native-reanimated';

const YourScreen = ({ navigation }) => {
  const translateX = useSharedValue(0);
  const screenWidth = Dimensions.get('window').width;

  // 处理左滑手势
  const panGesture = useAnimatedGestureHandler({
    onStart: (_, context) => {
      context.startX = translateX.value;
    },
    onActive: (event, context) => {
      // 限制拖动范围在0到屏幕宽度之间
      translateX.value = Math.max(0, Math.min(event.translationX + context.startX, screenWidth));
    },
    onEnd: () => {
      // 拖动超过屏幕一半宽度时触发跳转，否则回弹
      if (translateX.value > screenWidth / 2) {
        navigation.navigate('NextScreen');
        translateX.value = 0;
      } else {
        translateX.value = 0;
      }
    },
  });

  // 下一页的动画样式：从右侧滑入，透明度渐进
  const nextScreenStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value - screenWidth }],
      opacity: interpolate(translateX.value, [0, screenWidth], [0, 1]),
    };
  });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={panGesture}>
        <Animated.View style={{ flex: 1 }}>
          {/* 当前页面内容 */}
          <View style={{ flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center' }}>
            <Text>当前页面</Text>
          </View>
          {/* 悬浮的下一页预览，初始在屏幕右侧外 */}
          <Animated.View style={[
            { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: '#eee' },
            nextScreenStyle
          ]}>
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <Text>下一页</Text>
            </View>
          </Animated.View>
        </Animated.View>
      </PanGestureHandler>
    </GestureHandlerRootView>
  );
};

export default YourScreen;

2. 自定义Stack导航过渡动画（进阶） #

若要让整个栈的切换逻辑适配该效果，可自定义Stack的过渡配置，结合手势进度同步动画：

import { createStackNavigator } from '@react-navigation/stack';
import { Easing } from 'react-native-reanimated';

const Stack = createStackNavigator();

const AppStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        gestureDirection: 'horizontal-inverted', // 反转默认手势方向
        transitionSpec: {
          open: { animation: 'timing', config: { duration: 300, easing: Easing.inOut(Easing.ease) } },
          close: { animation: 'timing', config: { duration: 300, easing: Easing.inOut(Easing.ease) } },
        },
        // 自定义卡片过渡插值
        cardStyleInterpolator: ({ current, next, layouts }) => {
          return {
            cardStyle: {
              transform: [
                {
                  translateX: current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [layouts.screen.width, 0],
                  }),
                },
              ],
            },
          };
        },
      }}
    >
      <Stack.Screen name="CurrentScreen" component={YourScreen} />
      <Stack.Screen name="NextScreen" component={NextScreen} />
    </Stack.Navigator>
  );
};

export default AppStack;

注：该方案需将手势拖动进度与栈动画进度绑定，实现更连贯的切换体验，可结合第一种方案的手势逻辑进行扩展。

3. 第三方库参考 #

目前没有完全开箱即用匹配该效果的第三方库，但可基于react-navigation-shared-element等动画库进行二次开发，核心逻辑仍需结合手势与自定义动画实现。

注意事项 #

• 必须用GestureHandlerRootView包裹整个导航组件，否则手势无法生效
• 需适配不同设备的屏幕宽度，避免动画异常
• 可调整缓动函数与动画时长，让过渡效果更贴近示例

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