标签: react-native-reanimated

假设我有两个Views，因此我需要为它们设置动画，即

1. 第一个视图动画
2. 第一个视图完成动画，第二个视图动画

我究竟该怎么做react-native-reanimated？我在入职文档中发现的信息很少，那么这样做的最佳实践是什么？

我想添加react-native-reanimated到我的项目中，我按照安装指南进行操作，在添加 Babel 插件时，启动应用程序时收到错误：

error: index.js: [BABEL] W:\folders\project\index.js: Unknown option: .pre. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

我正在使用Android device，因此我启用了 Hermes 并在 MainApplication 中创建了该方法。我怎么解决这个问题？我必须在 GitHub 上发布问题吗？

babel.config.js

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    'react-native-reanimated/plugin',
  ],
};

依赖关系

"react": "17.0.1",
"react-native": "0.64.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "2.3.0-beta.1",
"metro-react-native-babel-preset": "^0.64.0",

尝试过的解决方案：

• 跑步react-native start --reset-cache。
• 删除node_modules并重新安装。
• 更改库版本。

我正在尝试练习这个视频。

https://youtu.be/R7vyLItMQJw（PinchGestureHandler 与 React Native Reanimated 2 的基础知识）

但我的应用程序无法触摸。

我收到此错误

[Reanimated] 无法确定Reanimated原生部分的版本。您是否在升级react-native-reanimated后忘记重新构建应用程序？如果您使用 Expo Go，则必须使用捆绑到 Expo SDK 中的确切版本。

我怎么解决这个问题？

第一的。我升级了Expo SDK。

但我仍然遇到同样的错误。

第二。重新构建应用程序。

但我仍然遇到同样的错误。

第三。我再次安装reanimated。但仍然是同样的错误。

我正在尝试在 React Native 中创建一个带有 2 个选项卡（使用react-native-tab-view）的屏幕，布局如下：

 ------------------------
|   Collapsible Header   |
|------------------------|  
|    Tab A  |  Tab B     |
|------------------------| 
|                        |
|                        |
|        FlatList        |
|         in Tab         |
|         Content        |
|                        |
|                        |
|                        |
|                        |
 ------------------------

我选择的布局是可折叠标题和选项卡栏的绝对定位，并且 FlatList 实际上覆盖了整个屏幕（标题和选项卡栏都位于其顶部）。为了将可滚动部分放在选项卡栏之后，我paddingTop在contentContainerStyleFlatList 的 中添加了 。这是问题的根源 - 当在选项卡 A 中滚动，然后移动到选项卡 B 时，由于填充，将会出现空白。

我创建了一个完整的 Expo 项目来展示这个问题：https://expo.io/@bartzy/collapsible-tab-view-example 这是 Expo 项目的 Github 存储库：https://github.com/bartzy/CollapsibleTabViewExample

这是示例应用程序的快速视频，显示切换到选项卡 2 后的空白填充空间：

我很感激有关如何在选项卡之间移动时消除空白空间，同时保持所需的折叠行为的任何想法。

在这段由 William Candillon 从http://start-react-native.dev制作的精彩视频中，他展示了如何制作这个离屏菜单。代码可以在这里找到：https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Menu

我的问题是，是否可以创建一个可以以编程方式关闭个人资料屏幕的功能，而不是用户在个人资料卡上滑动。最好是随着动画结束，但 B 计划可能只是优雅地将动画状态返回到起始点。如果有一个能够伪造滑动的通用函数就太棒了。

提前致谢！

我想使用react-native-router-flux，所以我按照其文档中的描述添加了它的依赖项。我还添加了 babel 插件依赖项，如下react-native-reanimated所示babel.config.js：

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'],};

但现在我在地铁服务器中收到此错误：

错误：index.js：无法从“/home/nia/Downloads/YarAb”找到模块“react-native-reanimated/plugin”

我的反应本机版本是0.63.2

我正在尝试将 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-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]);

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

我正在运行一个刚刚升级到 SDK 49 的托管应用程序。 eas-cli/3.17.1 darwin-arm64 node-v18.17.0

我的应用程序，即使在本地运行得很好，当我使用 Expo Go 应用程序从 EAS 更新打开它时，它也会在启动时崩溃。我已经尝试调查了三天，但无法修复。

我使用 XCode“控制台”应用程序在 Expo Go 应用程序崩溃时记录错误。以下是我在那里发现的 3 个错误日志：

• Expo Go RangeError：超出最大调用堆栈大小（本机堆栈深度），js引擎：hermes
• Expo Go 不变违规：“main”尚未注册。如果出现以下情况，就会发生这种情况：
  • Metro（本地开发服务器）从错误的文件夹运行。检查 Metro 是否正在运行，停止它并在当前项目中重新启动它。
  • 由于错误，模块无法加载并且AppRegistry.registerComponent未被调用。，js 引擎：hermes
• Expo Go NSInvalidArgumentException：-[EXReactAppExceptionHandler handleFatalJSExceptionWithMessage：stack：exceptionId：extraDataAsJSON：]：无法识别的选择器发送到实例0x281fa8380

在谷歌搜索这些之后，我意识到我应该关注的是第一个（“RangeError”），因为其他的只是它的结果，并且该问题可能是由我的一个依赖项由于某种原因失败引起的。

调查这一点让我怀疑“react-native-reanimated”（因为Github 问题），所以我尝试降级回 2.14.4，这是我使用的先前版本，当我在本地运行该应用程序时，应用程序因错误而崩溃：

TypeError：_ReanimatedModule.default.createNode不是一个函数（未定义），js引擎：hermes

接下来是同样的：“main”尚未注册错误，所以我认为值得一提。

然后我npx expo prebuild -p ios使用 XCode 来运行它，一开始运行得很好，但运行几次后突然崩溃了：

ReanimatedError：超出最大调用堆栈大小（本机堆栈深度）。、js引擎：复活

我还尝试将 jsEngine 切换到 JSC，但它所做的只是给我提供了更少有用的错误日志。

我已经认为我现在已经弄清楚了两次，但一天后我进行了新的 EAS 更新，它再次崩溃，所以我什至无法在那里获得一致性。

以下是升级到 SDK 49 期间对 package.json 依赖项所做的更改。在工作版本和崩溃版本之间没有对任何代码库进行其他更改，只有这些依赖项发生了更改。

我真的很沮丧..非常感谢你的帮助