使用调试器时，react-native-reanimated 淡入和淡出不起作用

Question

我正在尝试使用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，而不是Animated.View.

演示设置的小吃

我无法在小吃中重现这个问题。在零食中它似乎效果很好。在我的实际代码库中，这只是一个稍微分层的版本，没有动画。我怎样才能开始调试这个？

我的应用程序中的所有实例都是这种情况Animated.View。我让它在某个时候工作，然后在这个过程中的某个地方，它停止工作了。我不确定发生了什么变化。我正在使用世博会管理的项目。这是我的 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-native-navigation或react-native-bottomsheet，似乎动画效果很好。难道我做错了什么？我的包是否在途中某个地方不匹配并且我的动画突然停止工作？

Answer 1

所以在关于重生的世博文档中有一个线索：

react-native-reanimated@2 中的新 API 使用与远程 JS 调试不兼容的 React Native API。因此，您只能使用 Flipper 来调试使用这些 API 的应用程序，而该功能在 Expo 管理的工作流程中尚不可用。如果您使用 Reanimated 2 中的新 API，您将无法使用远程 JS 调试。如果您仅使用 Reanimated 1 中也提供的 API，远程 JS 调试将继续工作。

经过一些研究后，似乎对于很多人来说，使用react-native-reanimated@2 中的新 API 会破坏他们的调试器。对我来说，情况正好相反。我正在使用反应本机调试器。当我关闭调试器时，动画将按预期工作。当我重新打开它时，动画根本不起作用。（这exiting动画在某些情况下似乎仍然不起作用）。

希望世博会能够解决这个问题并改善未来的开发体验。但至少知道这只是一个发展问题是件好事。希望这个答案对其他人有帮助。