如何在没有触摸效果的情况下滚动平面列表

问题描述

我是 React Native 的新手,我使用了 FlatList,它有 ListItem 作为组件:

 <FlatList
       style={styles.container}
       data={items}
       renderItem={({ item }) => (
         <ListItem
           title={item.title}
           onPress={() => console.log("this is pressed",item.id)}
           )}
         />
       )}
       keyExtractor={(item) => item.id.toString()}
      
     />

一切正常,只有 问题是:当用户滚动视图时,即 FlatList 手指被按下的点,该组件显示 touch 效果。我希望 touch 效果仅在按下该元素时发生,而不是在滚动时发生。有什么办法可以解决这个问题吗?

  1. ListItem代码


import React from "react";
import { View,StyleSheet,TouchableHighlight } from "react-native";
import { AppText } from "./AppText";
import colors from "../config/colors";
import Swipeable from "react-native-gesture-handler/Swipeable";

function ListItem({title,onPress}) {
  return (
    <Swipeable renderRightActions={renderRightActions}>
      <TouchableHighlight onPress={onPress}>
        <View style={[{ backgroundColor },styles.container]}>
          <View style={styles.textContainer}>
            {title && <AppText style={styles.title}>{title}</AppText>}
          </View>
        </View>
      </TouchableHighlight>
    </Swipeable>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",padding: 10,},textContainer: {
    marginLeft: 10,justifyContent: "center",title: {
    fontWeight: "900",});

export default ListItem;

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)