React Native各页面自定义过渡动画求助：navigate方法适配问题

没问题，我来帮你搞定这个自定义过渡动画的需求！结合你给出的this.props.navigation.navigate('SearchVideo',{keyword:keyword})跳转代码，我们可以通过React Navigation的配置来实现不同页面跳转的专属动画，下面分两种常用场景给你详细说明（以React Navigation v5+版本为例，这是目前的主流版本）：

一、给目标页面设置默认过渡动画 #

如果某个页面的所有跳转进入都想用同一种动画，我们可以在Stack Navigator的路由配置里直接指定：

1. 先定义自定义动画函数 #

首先我们需要写几个不同的动画插值函数，对应你想要的A→B、B→C不同效果：

import { Animated } from 'react-native';

// 动画1：从右侧滑入（适合A→B的跳转）
const slideFromRight = ({ current, next, inverted, layouts: { screen } }) => {
  const progress = Animated.add(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    }),
    next ? next.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    }) : 0
  );

  return {
    cardStyle: {
      transform: [
        {
          translateX: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1, 2],
              outputRange: [screen.width, 0, -screen.width],
              extrapolate: 'clamp',
            }),
            inverted
          ),
        },
      ],
    },
  };
};

// 动画2：从底部弹出（适合B→SearchVideo的跳转）
const slideFromBottom = ({ current, layouts: { screen } }) => {
  const translateY = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [screen.height, 0],
  });

  return {
    cardStyle: {
      transform: [{ translateY }],
    },
  };
};

2. 在Stack Navigator中配置路由 #

把这些动画绑定到对应的页面上：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import PageA from './PageA';
import PageB from './PageB';
import SearchVideo from './SearchVideo';

const Stack = createNativeStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator>
      {/* 页面A：使用默认动画，也可以自己指定 */}
      <Stack.Screen name="PageA" component={PageA} />
      {/* 页面B：指定从右侧滑入的动画，所有跳转到B的操作都会用这个动画 */}
      <Stack.Screen 
        name="PageB" 
        component={PageB} 
        options={{
          animationEnabled: true,
          cardStyleInterpolator: slideFromRight,
        }}
      />
      {/* SearchVideo页面：指定从底部弹出的动画 */}
      <Stack.Screen 
        name="SearchVideo" 
        component={SearchVideo} 
        options={{
          animationEnabled: true,
          cardStyleInterpolator: slideFromBottom,
        }}
      />
    </Stack.Navigator>
  );
}

这样配置后，当你从PageA跳转到PageB时会触发右侧滑入动画，从PageB执行this.props.navigation.navigate('SearchVideo',{keyword:keyword})时，就会触发底部弹出的动画啦。

二、动态指定跳转时的动画（更灵活） #

如果同一个页面，从不同来源跳转需要不同动画，我们可以在navigate方法里直接传递动画配置，覆盖页面的默认设置：

比如在PageB中，你想让跳转到SearchVideo时用一个缩放淡入的动画，而不是默认的底部弹出，就可以这么写：

1. 先新增一个缩放淡入的动画函数 #

const scaleFadeIn = ({ current }) => {
  const scale = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0.8, 1],
  });
  const opacity = current.progress.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  return {
    cardStyle: {
      transform: [{ scale }],
      opacity,
    },
  };
};

2. 在navigate时传递动画选项 #

注意navigate的第三个参数是导航配置选项，我们在这里指定自定义动画：

// 在PageB的类组件中
handleSearch = (keyword) => {
  this.props.navigation.navigate(
    'SearchVideo', 
    { keyword: keyword }, // 传递参数
    { 
      // 这里指定本次跳转的动画
      animationEnabled: true,
      cardStyleInterpolator: scaleFadeIn,
    }
  );
};

这样本次跳转就会使用缩放淡入的动画，而不受SearchVideo页面默认动画的影响，非常灵活。

注意事项 #

• 确保你已经安装了React Navigation的必要依赖：@react-navigation/native、@react-navigation/native-stack，以及react-native-screens、react-native-safe-area-context这些基础依赖。
• 如果使用的是React Navigation v4版本，写法会略有不同，需要用transitionConfig来配置动画，但v4已经是旧版本，建议升级到v5+获得更好的支持。

内容的提问来源于stack exchange，提问作者Hoàng Đồng