标签: react-native-reanimated-v2

我正在尝试将 SVG 路径的长度从 0 动画化为 React Native Reanimated 2 中的完整长度。这是我的示例路径：

const AnimatedPath = Animated.createAnimatedComponent(Path);

const animatedProps = useAnimatedProps(() => {
  const path =
    `M${width * 0.182} ${height * 0.59} ` +
    `L${width * 0.443} ${height * 0.59} ` +
    `L${width * 0.443} ${height * 0.39} `;
  return {
    d: path,
  };
});

return (
  <Svg height="100%" width="100%">
    <AnimatedPath animatedProps={animatedProps} fill="none" stroke="red" strokeWidth="5" />
  </Svg>
);

我尝试在路径的宽度上添加一些插值，但没有成功。我还尝试查看 Redash 的 interpolatePath() 实现，但它似乎采用两个路径作为输出范围。还有什么我应该看的吗？

我正在寻找react-native 的等价Animated.sequence物Animated.parallel。到目前为止，从v2 的文档来看，我只能看到仅withSequence更改 on value 的值的函数，因此仅更改系列中一个组件的样式。

我正在寻找的是在两个不同的组件中触发动画，无论是串联还是并行。对于并行，似乎一个接一个地改变语句中的值是有效的。如我错了请纠正我。

  // these will run in parallel
  val1Shared.value = withTiming(50);
  val2Shared.value = withTiming(100);

但对于系列，我需要将每个动画放在 useTiming 回调中。这会导致某种回调地狱。

  val1Shared.value = withTiming(50, undefined, () => {
    val2Shared.value = withTiming(100);
  });

请帮助使用 reanimated 2 实现这一目标的最佳实践。谢谢。

我已经将 react-native 从版本升级0.64.1到了，0.65.0-rc.3因为targetSdk=30需要从 8 月 21 日起向 Google Play 发布一个包。我正在使用升级助手升级字母到字母现在我收到./gradlew bundleRelease错误：

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeReleaseAssets'.
> Could not resolve all files for configuration ':app:releaseRuntimeClasspath'.
   > Failed to transform react-native-reanimated-65-jsc.aar (project :react-native-reanimated) to match attributes {artifactType=android-assets}.
      > Execution failed for JetifyTransform: MyApp/node_modules/react-native-reanimated/android/react-native-reanimated-65-jsc.aar.
         > Transform's input file does not exist: MyApp/node_modules/react-native-reanimated/android/react-native-reanimated-65-jsc.aar. (See https://issuetracker.google.com/issues/158753935)

已经尝试过：

• 删除 node_modules，重新安装
• 清理gradle、project、yarn缓存等...
• 试图明确喷射
• 升级安卓工作室
• 将 react-native-reanimated …

我做了什么导致了错误： 我有一个新安装的 Bare React Native Project 。我想使用抽屉导航并且必须安装 React Native Reanimated 2.3.0-alpha.2 。

我已经尝试解决该错误

• 我已经安装了新的裸反应本机项目
• 清除 Metro 缓存
• 尝试使用Reanimated 2.0.0
• 我已遵循https://www.reanimated2.com/docs/next/installation中的所有步骤。

错误

捆绑./index.js

错误：index.js：找不到模块“babel-plugin-r”需要堆栈：

• D:\Work\React Native\React Native with Node\healthapp\node_modules@babel\core\lib\config\files\plugins.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules@babel\core\lib\config\files\index.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules@babel\core\lib\index.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules\metro-transform-worker\src\index.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules\metro\src\DeltaBundler\Worker.js
• D:\Work\React Native\React Native with Node\healthapp\node_modules\metro\node_modules\jest-worker\build\workers\processChild.js

所以我正在使用抽屉导航器（反应导航）。一切都工作正常，直到我升级了软件包。这是它的新版本及其依赖项；

"@react-navigation/drawer": "^6.3.1",
"react-native-gesture-handler": "^2.3.2",
"react-native-reanimated": "^2.4.1",

现在的问题是，当我更换屏幕时，抽屉会重新打开，有时后退按钮也无法正常工作，因为它只是打开抽屉而不会带我到其他屏幕。所以我想也许需要复活2。

因此，根据文档，如果我们想使用 reanimated 2，那么我们需要按照这些文档进行设置。

我只是按照文档进行操作，清理项目并重建它，但问题仍然存在。

然后我检查了抽屉导航中的一个道具，useLegacyImplementation其定义为；

是否使用基于Reanimated 1的旧实现。基于Reanimated 2的新实现会表现更好，但需要额外的配置，并且需要使用Hermes和Flipper来调试。

在以下情况下默认为 true：

Reanimated 2 未配置 应用程序已连接到 Chrome 调试器（Reanimated 2 不能与 Chrome 调试器一起使用） 应用程序正在 Web 上运行 否则，默认为 false

我将其设置为 true，问题就消失了。

现在我很困惑为什么这有效。为什么即使我没有配置reanimated 2，问题仍然存在，因为设置useLegacyImplementation: true只是意味着使用reanimated 1（如果我错了，请纠正我）。

所以请解释一下问题的可能原因以及如何解决（虽然解决了但不知道如何）

使用react-native-reanimated，我尝试无限重复一个动画，这也是一个有延迟的重复动画。

使用我的代码，会触发延迟和嵌套重复动画，但不会触发无限动画。

有任何想法吗 ？

useEffect(() => {
  progress.value = withRepeat(
   withDelay(2000, withRepeat(withTiming(0, { duration: 500 }), 6, true)),
   -1,
   true
  );
 }, []);

如何根据 Reanimated 库中的共享值触发 useEffect？

 const sharedValue = useSharedValue(0);
  useEffect(() => {
    console.log("exectue functions");
  }, [sharedValue.value]);

有没有这方面的最佳实践。或者是否有另一种方法可以根据共享值的更改来触发函数（同步和异步）。

我面临这个问题

包react-native-screens已被忽略，因为它包含无效的配置。原因：不允许“dependency.platforms.android.componentDescriptors”

我一直TouchableOpacity在我的 React Native 项目中使用它，以方便使用，但我有兴趣尝试新Pressable组件 - 考虑到它的 API 非常灵活。

然而，虽然新的PressableAPI 使我能够轻松地更改style基于pressed状态的道具等内容，但没有像TouchableOpacity!中的不透明度那样平滑/动画过渡。相反，按下/松开时会立即发生转换。

最好的使用方法是什么Pressable，同时又能在按下/未按下的样式更改之间实现良好、平滑的过渡？我想我必须以Animated某种方式使用 API？有人有这方面的例子吗？

我的react-native项目正在运行，但今天我厌倦了在andorid上运行它，它给出了 abouve Error TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')。尝试了很多东西gradlew clean node modules deleted cache-clear但没有任何效果