React Native Navigation：仅为启动页设置淡出动画

如果用的是React Navigation（主流移动端导航方案），可以通过以下两种方式实现，无需给所有页面配置动画：

方法1：在启动页的跳转方法中指定动画选项 #

每次从启动页跳转时，在navigate方法的第三个参数里设置动画配置，仅对当前跳转生效：

// 启动页组件内的跳转逻辑
navigation.navigate('Home', {}, {
  animation: 'fade',
  animationTypeForReplace: 'fade' // 针对替换栈的场景（比如启动页只出现一次，替换掉栈）
});

方法2：在导航配置中给启动页设置退出动画 #

在Stack Navigator的屏幕配置里，给启动页单独设置exitAnimation，这样所有从启动页出发的跳转都会自动触发淡出动画，无需每次跳转都写配置：

// Stack Navigator的配置代码
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Splash"
        component={SplashScreen}
        options={{
          exitAnimation: 'fade',
          // 可选：如果不需要启动页的进入动画，可设置entryAnimation: 'none'
        }}
      />
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 其他页面正常配置即可 */}
    </Stack.Navigator>
  );
}

这种方式更简洁，只需要配置一次启动页，所有从它跳转出去的动作都会应用淡出动画，完全不影响其他页面的默认动画行为。

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