实现渐变效果的最简单方法：

const forFade = ({ current }) => ({
  cardStyle: {
    opacity: current.progress,
  },
});

如果要为整个导航器应用淡入淡出效果：

<Stack.Navigator
   screenOptions={{
      headerShown: false,
      cardStyleInterpolator: forFade,
   }}>
   <Stack.Screen name="Home" component={HomeScreen} />
   <Stack.Screen name="Stocks" component={StocksScreen} />
</Stack.Navigator>

您也可以通过设置选项将cardStyleInterpolator应用于单屏幕：

<Stack.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{ cardStyleInterpolator: forFade }}/>

您可以自定义forFade函数以实现其他效果，或者您也可以使用一些预先制作的插值器，如：

• ForHorizontalIOS
• ForVerticalIOS
• ForModalPresentationIOS
• 适用于FadeFromBottomAndroid
• 从底部显示Android

import { CardStyleInterpolators } from '@react-navigation/stack';

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{
    cardStyleInterpolator: CardStyleInterpolators.forFadeFromBottomAndroid,
  }}
/>;

更多信息在这里：https://reactnavigation.org/docs/stack-navigator/#animations

对于React Navigation 6.xx，您可以使用动画选项：

<Stack.Screen
        name="Profile"
        component={Profile}
        options={{ animation: 'fade' }}
/>

支持的值：

• “default”：使用平台默认动画
• “fade”：淡入淡出屏幕
• “flip”：翻转屏幕，需要演示：“modal”（仅限iOS）
• “simple_push”：使用平台默认动画，但没有阴影和原生头过渡（仅限iOS）
• “slide_from_bottom”：从底部滑入新屏幕
• “slide_from_right”：在新屏幕中从右侧滑动（仅限Android，在iOS上使用默认动画）
• “slide_from_left”：在新屏幕中从左侧滑动（仅限Android，在iOS上使用默认动画）
• “none”：不设置屏幕动画