如何使用createBottomTabNavigator实现React Navigation转场动画

react-navigation 6.x 版本的 bottom-tab-navigator 本身未内置转场动画配置入口，可通过以下两种稳定方案实现需求：

方案1：自定义页面级动画（无结构改动） #

• 先在createBottomTabNavigator的screenOptions中关闭默认切换行为：animation: 'none'
• 所有Tab页组件外层包裹动画容器，监听页面焦点状态触发淡入效果，参考代码：

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

const CustomTabScreen = () => {
  const isFocused = useIsFocused();
  const opacity = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    if (isFocused) {
      // 淡入动画，时长可自定义
      Animated.timing(opacity, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }).start();
    } else {
      // 失焦时重置透明度，为下次切入做准备
      opacity.setValue(0);
    }
  }, [isFocused, opacity]);

  return (
    <Animated.View style={{ flex: 1, opacity }}>
      {/* 原有页面业务代码 */}
    </Animated.View>
  );
};

方案2：嵌套Stack Navigator（官方原生能力适配，优先推荐） #

直接复用react-navigation官方支持的stack转场能力，改动量小且无性能、兼容性问题：

• 每个Tab对应的路由改为嵌套一层NativeStackNavigator，给stack配置screenOptions={{ animation: 'fade' }}即可实现原生级淡入淡出效果
• Bottom Tab仅负责切换各个Stack的根路由，不需要额外自定义动画逻辑

你提到的演示示例可直接基于上述两种方案修改实现效果。

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