如何在React Native上检测用户什么时候得到一个View，并在得到这个位置后做一些事情？

Question

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

例子：我有一个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>

Answer 1

不使用 ScrollView 你可以使用 FlatList这为你试图做的索引类型提供了更多的支持。

要检测用户何时到达一个特定的点，你可以使用 onViewableItemsChanged 和定义哪些可查看的项目需要在屏幕上才能触发你的动画。

FlatLists 还支持一些内置的动画，如 scrollToEnd 或 ScrollToIndex 这可能会有帮助。