时间戳

首页 > 解决方案 > React Native 嵌入式动画不起作用

react-native - React Native 嵌入式动画不起作用

问题描述

我正在制作一个反应原生 IOS 的应用程序，我目前在处理一些动画时遇到了问题。

组件的简化版本是这样的

[canCancelContentTouch, setCanCancelContentTouch] = useState(true)
Animated.ScrollView 
   canCancelContentTouches = cancCancelContentTouch 
  <
   <Component/>
   <Component/>
   <Swiping
      <SwipeCard with panResponder />
      <SwipeCard with panResponder />
    />
/>

我想要做的是允许用户在动画滚动视图中水平滑动，直到他们使用刷卡到达他们的滑动组件。在那个层面上，它有点像这样。刷卡卡的构建使得它们可以像 Tinder 一样被刷卡（仅向右）。在滚动视图中移动可以正常工作，但目前的卡片有问题。

他们表现出的行为是这样的：

您可以使用刷卡并开始手势动作。起初，整个页面的移动就像您在其他组件中导航时一样。您触摸卡片并触发“onMoveShouldSetPanResponder”，它将 canCancelContentTouches 设置为 false。这应该会停止水平滚动并让用户移动卡片。起初这不起作用，而是整个页面移动，它给出了下面列出的错误。你第一次放手，再次触摸并拖动，卡片就会像它一样移动。你再次松开，组件消失，直到你再次触摸。

我得到的错误是：该值touchEvent.locationY等于 NaN 或 INF 并将被替换为0.

我目前的假设是状态变化正在触发一些重新渲染，并且它正在与组件一起使用。关于可能导致它的任何想法？

标签： react-nativegesturereact-animated

解决方案

推荐阅读