时间戳

首页 > 解决方案 > 在 React Native 上获得这个位置后，如何检测用户何时获得视图并执行某些操作？

react-native - 在 React Native 上获得这个位置后，如何检测用户何时获得视图并执行某些操作？

问题描述

我有一个 ScrollView，里面有一些 View，但是我想在用户到达特定 View 并在它启动我的动画之后启动动画。

例子：

<ScrollView style={{ width: DeviceWidth, height: DeviceWidth * 0.5 }}>

   {/* When user position scroll is here, 
       is where I want to start the animation, 
       not since the page is loaded */}

   <View style={{
         width: DeviceWidth * 0.4,
         height: DeviceWidth * 0.4,
         resizeMode: "contain",
      }}>
      <ProgressBarAnimated
          width={barWidth}
          value={65}
          backgroundColor="#F68D29"
          height={40}
          barAnimationDuration={6000}
      />
   </View>
</ScrollView>

标签： react-nativeanimationviewpositionscrollview

解决方案

ScrollView您可以使用 a 而不是使用 a ，FlatList这为您尝试执行的索引类型提供了更多支持。

要检测用户何时到达特定点，您可以使用onViewableItemsChanged并定义哪些可视项目需要在屏幕上以触发动画。

FlatLists还支持许多内置动画，例如scrollToEnd或ScrollToIndex可能有帮助。

推荐阅读