react-native-reanimated调试时FadeIn/FadeOut淡入淡出动画失效

问题场景 #

我在调试Expo托管的React Native项目时，尝试通过react-native-reanimated实现组件挂载、卸载阶段的淡入淡出效果，核心实现逻辑非常简单：

import { View } from "react-native";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";

export const Dialog = () => (
  <Animated.View
    style={styles.loadingWrapper}
    entering={FadeIn}
    exiting={FadeOut}
  >
    <Progress.CircleSnail />
  </Animated.View>
);

const App = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View>
      {isVisible && <Dialog />}
      <Button 
        title="Open Dialog" 
        onPress={() => setIsVisible(true)}
      />
    </View>
  );
}

预期效果为isVisible状态变化时，Dialog组件会平滑完成淡入、淡出过渡，但实际表现和使用普通View完全一致：组件直接弹出、直接消失，没有任何动画效果。
相同代码在Expo Snack环境中运行时动画表现正常，无法复现该问题；但在本地实际项目中（仅比示例多了一些层级封装），所有Animated.View的同类进入/退出动画都存在失效问题。该功能此前曾正常运行，某次代码变更后突然失效，无法定位具体改动点。

项目环境信息 #

项目为Expo托管项目，package.json中相关依赖版本片段如下：

{
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/webpack-config": "~0.16.2",
    "@gorhom/bottom-sheet": "^4.3.1",
    "@react-native-async-storage/async-storage": "~1.17.6",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "expo": "^45.0.4",
    "expo-web-browser": "^10.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-dropdown-picker": "^5.4.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-get-random-values": "~1.8.0",
    "react-native-maps": "0.30.2",
    "react-native-progress": "^5.0.0",
    "react-native-reanimated": "~2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-svg": "12.3.0",
    "react-native-web": "0.17.7",
    "webpack-dev-server": "~3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.67.7",
    "babel-plugin-inline-import": "^3.0.0",
    "react-devtools": "^4.24.7",
    "typescript": "~4.3.5"
  }
}

babel配置已按照react-native-reanimated官方安装文档要求完成配置：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "babel-plugin-inline-import",
        {
          extensions: [".svg"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

目前项目中其他依赖react-native-reanimated的第三方库（如react-navigation、@gorhom/bottom-sheet）动画均可正常运行，需要确认是代码写法存在问题，还是依赖版本不匹配导致动画失效，以及可行的调试方向。

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