问题标签 [react-native-reanimated]

在下面的简单滑块（打字稿）示例中，来自 react-native-gesture-handler 的 PanGestureHandler 只会在手势启动后设置。用户将需要移动手指。

这就是我想要实现的： Taps 还应该设置滑块值（包括点击和拖动）。这是一种常见的模式，例如在寻找视频文件或将音量设置为最大然后进行调整时。

我想我可以将它包装在 TapGestureHandler 中，但我正在寻找最优雅的方式来实现这一点，而无需太多样板。

提前致谢！

编辑：这按预期工作，但有一个可见的渲染怪癖和一个小的延迟。

以下react-native-reanimated节点

包含在一个<Animated.Code>块中：

根据我对这个库如何工作的理解，我希望这个节点在每一帧中都会更新，从而产生某种动画，使每一步的值decay更接近最终值 0,5。springmyValue

但是，这不起作用。在我的应用程序（其中有更多reanimated节点）中，它仅在通过运行时钟或已更改的输入变量更新至少一个其他变量的那些帧中更新。

<Animated.Code>如果不确保在每一帧都对这个节点进行评估，那么使用它有什么意义呢？

我正在使用 "react-native": "0.59.10" "react-native-reanimated": "^1.3.0" 和 typescript 我收到转换属性的类型错误

这是我得到的错误

我使用 PanGestureHandler 和 ScrollView 编写了一个菜单。

问题是; 当 PanGestureHandler 处于活动状态时，ScrollView 的滚动不起作用。

我的意思是滑动功能正在工作，但滚动不起作用。

我的期望是同时使用这两个功能。

我在下面分享了我的实现代码。

任何想法？_

构造函数

使成为

当我们使用,或之react-native-reanimated类的动画属性时，在“本机” UI 线程上运行动画。这些属性不会影响布局引擎，因此我们可以在主线程 (JS) 上完成布局，通过桥将值传递给 UI 线程，然后在不涉及布局引擎的情况下为内容设置动画。translateXscaleopacityreact-native-reanimated

height但是，当,padding或之类的属性margin被动画化时，就不是很清楚了。这些属性会影响布局，我们需要在属性发生变化时更新布局。但是布局是由 Javascript 中的主线程完成的。如果布局引擎必须在每一帧都处于活动状态，因为height或padding已经改变，它肯定会严重影响性能。

事实上，我目前在制作动画时遇到了巨大的性能问题padding。分析器告诉我性能问题来自网桥。似乎 UI 线程每帧都回调 Javascript，可能是为了让主线程更新布局，然后布局再次通过桥传递给原生。

但是，react-native-reanimated提供了 example widthandheight/index.js，它清楚地为 等属性设置了动画width，height并且fontSize对布局有影响。此示例以 60fps 平稳运行。

如何react-native-reanimated处理对布局有影响的动画？动画开始和结束时是否有布局过程，中间只有 UI 线程（这听起来像是实验性的过渡功能，但我不是在谈论过渡）。为了获得良好的性能，是否需要遵循一些特殊的方法？

编辑：与此同时，我了解到其中一些假设是错误的。React Native 布局不是在 Javascript 线程上完成的，而是在原生 UI 线程上完成的。所以，原则上，动画时不应该有过桥调用padding，width和margin。我的性能问题可能源于我的布局太复杂而无法以 60 fps 更新。

我正在尝试做的事情

我正在尝试创建一个动画间距/填充元素，该元素在显示或隐藏键盘时会改变高度，以确保 TextInput 不被键盘或避免键盘使用的按钮覆盖KeyboardAvoidingView。如果按钮将覆盖输入，我只希望这个动画空间改变高度 - 否则，我不希望间距改变高度。这是设计要求。

我目前的解决方案

我以前可以使用Animated来自 的 API来实现这一点react-native，但是我想用它react-native-reanimated来获得在 UI 线程上运行所有内容的性能优势。我实际上有一个可行的解决方案，但是在动画期间 UI 线程下降到 50 fps 中，所以我假设我做错了什么。

正如您将在下面的代码中看到的那样，我正在计算所有元素的高度，以确定固定在键盘顶部的按钮是否与TextInput. 如果是这样，我从文本上方的间距高度中减去重叠量（animHeaderHeight）。您应该能够复制粘贴此代码并运行它。如果您打开分析器并观看 UI 线程，通过聚焦输入并点击返回来关闭它来切换动画。动画有效，但它会导致 UI 线程以低于 60fps 的速度运行。

可重现的代码

我用expo init. 以下是软件包版本：

这是代码。

最后的想法

我希望 UI fps 保持一致的 60，但是我设置东西的方式导致丢帧。我想知道这是否与我的react-native-reanimated动画取决于键盘的状态（即取决于来自 JS 线程的信息）这一事实有关。我有点想知道如果没有 JS 和 UI 线程之间通过桥接的持续通信，这是否可能实现。任何帮助或方向将不胜感激。

按住或按下按钮时如何在滚动后停止滑动？单击此处观看示例。有任何想法吗？

我有一个使用reanimated-bottom-sheet包创建的底部表，如下所示

this.bottomSheetRef.current.snapTo(1)我可以使用/打开/关闭底部工作表this.bottomSheetRef.current.snapTo(0)

但是当向下滑动正文/标题时，工作表不会关闭。

我使用 react native reanimated 创建了一个简单的动画，但我无法访问 Reanimated Value 的数值

我使用胜利原生饼图，我想制作一个简单的效果，饼角从 0 到 360，但我已经尝试过 react-native 动画 API，它适用于添加侦听器，但我想使用 reanimated 来解决性能问题

我正在寻找的图表从 0 到 360 的动画效果

使用 react-native Animated API 正确运行：

我如何才能通过复活来实现所需的输出？

我目前正在开发一个ReactNative有 2 个屏幕的应用程序。目标是为屏幕设置动画，使它们根据您来自哪个屏幕上下相互推动。以下GIF是我想要实现的过渡。

目前我正在使用createAnimatedSwitchNavigator来创建效果，问题是我当前的过渡只会将屏幕向上推。有没有办法在动画切换导航器中检测我当前在哪个屏幕上，以便我可以改变过渡的方向？

请指导我。

谢谢