我们已经使用 React Native PanResponder 开发了一个 swiper，（在有人评论之前） - 我们不能在这里使用任何其他 swiper 库。在我们开发的滑动器中，我们面临一个问题，当用户结束滑动（意味着释放 Pan）时，启动弹簧动画时会出现延迟。

因此，为了解决这个问题，我们正在尝试从React Native Animated API转移到Reanimated Libary，这可以解决用户面临的滞后问题。

但是在使用React Native Gesture Handler (PanGestureHandler) 和 Reanimated Library 进行开发时，我们无法在手势处理程序中检测滑动方向。

我正在添加我们用来在 PanResponder 中检测滑动方向的代码部分

如您所见，在 PanResponder 中检测平移移动时的方向非常容易。

手势处理程序的问题来了，

手势状态处于活动状态时，我无法检测到滑动

我已经在 Gesture Handler 中搜索过问题并找到了这个。

问题中建议了两种解决方法

1. 第一个是由Sonaye 编写的，它有两个处理程序，并在onHandlerStateChange中检测两个处理程序的滑动方向，这在使用 reanimated 时没有帮助，因为它仅在处理程序状态更改时设置滑动方向。
2. 第二个是Satya，它实际上在状态为 ACTIVE 时检测到滑动，但他使用了translationX属性，translationX 属性也可以对我们不利，并且可以像 swiper 一样向任一方向移动。

这两种解决方法都不能解决我们的问题。

那么有没有其他方法可以使用 PanGestureHandler 和 Reanimated 找到方向。我尝试将 PanResponder 与 Reanimated 与dx值一起使用，但最终得到错误消息，即仅支持 nativeEvent 属性，因为dx来自 PanResponder 的手势状态参数。

注意：我们不能使用FlingGestureHandler和Swipeables ，因为我们需要在 Fling 中找到方向仍然 onHandlerStateChange 并且 Swipeables 不使用 Reanimated。

即使我更改，我也会收到此错误： inputIndex === i ？255: 0 到 inputIndex === i ？“#ffffff”：“#aaa2d7”。

目的是当第一个选项卡处于活动状态时，标题颜色应为白色“#ffffff”，其他选项卡应为“#aaa2d7”

谢谢你

所以我正在用 Expo 练习 React Native Reanimated 或 React Native 中的动画。我正在尝试使用动画从下到上打开一个屏幕。

当我按下Text它时，它将在我的父组件顶部显示另一个屏幕，动画从下到上。

但这是我得到的输出：

我想得到的输出：

这是我的代码：

我的子组件的代码是Home.js：

此处记录的动画 api只能为原生非布局属性设置动画。

另一方面，Reanimated 没有记录这种信息（至少我找不到）。我可以从 github问题中看到有一个配置文件，其中包含 UI_THREAD_PROPS_WHITELIST 和NATIVE_THREAD_PROPS_WHITELIST. 有谁知道为什么它们是分开的和潜在的性能影响？

I’m currently using LayoutAnimation to animate a view when children are added. However, since LayoutAnimation causes everything to be animated, globally, and I can’t easily use built-in Animated library to fit my use-case, I’m wondering if react-native-reanimated is able to help.

Here's a snack of my current solution: https://snack.expo.io/@insats/height-adapation

This is what the result of that looks like:

Is there a way to achieve the same thing without using LayoutAnimation? I've looked through all exampled in react-native-reanimated, and I've read through the docs but I'm still not sure if this is possible to do or how I should get started. I've thought about using Animated to move the item-wrapper out of the viewable area and "scroll" it upwards (using transform translateY) when items are added, but that would require fixed height, which I don't have.

我想要做什么

当文本输入聚焦时，我需要为视图的背景颜色设置动画。

我到现在为止所做的

我构建了一个具有两个功能的组件，onFocus并且onBlur- 它只是eventreact-native-reanimated 的一个功能。

我将此函数传递给动画文本输入，我在控制台上没有错误，它显示了我设置的自定义背景颜色。但不会改变焦点或模糊。

代码

我正在使用打字稿

结果

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

我采用的布局是可折叠标题和标签栏的绝对定位，而 FlatList 实际上覆盖了整个屏幕（标题和标签栏都在它的顶部）。为了将可滚动部分放在标签栏之后，我在 FlatList 中添加paddingTop了一个。contentContainerStyle这是问题的根源 - 当在选项卡 A 中滚动，然后移动到选项卡 B 时，由于该填充，将会有一个空白区域。

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

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

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

假设我有两个Views，因此我需要对它们进行动画处理，即

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

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

当我想安装 reac-navigation、react-native-gesture-handler 和 react-native-reanimated 时，我正在使用 react-native 0.59.10 制作一个项目。我得到错误并且项目没有建立，我应该使用它们每个的特定版本吗？

我正在尝试在 react native 中创建一个切换播放器动画，就像 Spotify 一样，当您按下 时miniPlayer，将显示全尺寸播放器，我的问题是 fullSize Player View 是transparent，我似乎无法获得该视图的背景以呈现正确的color.

我创建了一个小吃，因为原始项目很大并且更好地理解这个问题： https ://snack.expo.io/@git/github.com/oflarcade/MPlayer

迷你播放器

全尺寸播放器