React Native Stack Navigator如何实现旧屏幕上滑的底部滑入转场？

可以实现，默认的slide_from_bottom动画只处理新屏幕的滑入逻辑，要让旧屏幕同时向上滑出，你需要自定义转场插值器，同时控制新旧屏幕的位移动画。

具体实现代码 #

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

const Stack = createStackNavigator();

// 自定义转场插值器
const customSlideFromBottomInterpolator = ({ current, layouts }) => {
  // 新屏幕：从底部滑入
  const nextTranslateY = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [layouts.screen.height, 0],
  });

  // 旧屏幕：向上滑出
  const currentTranslateY = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -layouts.screen.height],
  });

  return {
    cardStyle: {
      transform: [{ translateY: nextTranslateY }],
    },
    currentCardStyle: {
      transform: [{ translateY: currentTranslateY }],
    },
  };
};

// 自定义动画时长和缓动规则（和默认动画体验对齐）
const transitionSpec = {
  open: {
    animation: 'timing',
    config: {
      duration: 300,
      easing: Animated.ease,
    },
  },
  close: {
    animation: 'timing',
    config: {
      duration: 300,
      easing: Animated.ease,
    },
  },
};

// 整合后的Stack Navigator配置
<Stack.Navigator
  initialRouteName="Home"
  screenListeners={({ navigation, route }) => ({
    focus: () => {
      setIsTabBarVisible(route.name === 'Home' ? true : false);
    },
  })}
  screenOptions={{
    header: () => undefined,
    // 替换默认动画为自定义配置
    transitionSpec,
    cardStyleInterpolator: customSlideFromBottomInterpolator,
  }}
>
  {/* 此处添加你的屏幕组件 */}
</Stack.Navigator>

关键说明 #

• 自定义的customSlideFromBottomInterpolator通过current.progress（转场进度值），分别计算新旧屏幕的垂直位移，实现同步滑入滑出效果。
• transitionSpec用来匹配默认转场的时长和缓动逻辑，你可以按需调整duration数值改变动画快慢。
• 完全保留了你原本的底部导航栏显隐控制、隐藏header的配置逻辑。

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