首页 > 解决方案 > 如何在 View React Native 中检测拖动端

问题描述

我有一个观点。在这个视图中,我有一个平面列表,该列表具有有效的onScrollEndDrag逻辑onScrollBeginDrag,除非在不属于平面列表的底部选项卡菜单上释放拖动。因为处理程序位于 FlatList 上,所以我无法检测到底部选项卡上发生的拖动释放。我需要将拖动结束逻辑附加到视图而不是 FlatList。如何检测何时拖动结束/用户在 View 而不是 FlatList 中释放屏幕的手?

这是我目前拥有的:

 <View>
      <StatusBar barStyle={"light-content"} />
      <FlatList
        data={challenges}
        renderItem={({ item, index }) => (
          <ChallengePost challenge={item} isVideoPlaying={index === currentlyPlaying && !navigatedOutOfScreen} />
        )}
        keyExtractor={(challenge) => challenge._id}
        showsVerticalScrollIndicator={false}
        snapToInterval={Dimensions.get("window").height}
        snapToAlignment={"start"}
        decelerationRate={"fast"}
        onViewableItemsChanged={onViewRef.current}
        onScrollEndDrag={() => (scrollEnded.current = true)}
        onScrollBeginDrag={() => (scrollEnded.current = false)}
      ></FlatList>
    </View>

正如您onScrollEndDrag onScrollBeginDrag在 FlatList 级别上看到的那样,我希望它能够检测到整个屏幕上发生的拖动释放。

标签: react-native

解决方案


检查这个库它应该可以帮助您更轻松,因为它将一些组件包装在自己的平移手势处理程序中

反应本机手势处理程序

例子


推荐阅读