Question

我有一个FlatList重新整理项目，其中包含PanResponder。如果我从漫游器快速滑动到顶部，列表会滚动，如果我变慢，则PanResponder会获取事件。

我如何使其正常工作？

我的代码：

我的列表：

import {ScrollView, SafeAreaView, FlatList, StyleSheet} from 'react-native';

import Item from './Item'
import { Divider } from 'react-native-elements';

export default function SwipeableList(props) {

    const [items, setItems] = React.useState(props.datas);
    const [deletedItems, setDeletedItems] = React.useState([]);
    const [enable, setScrollEnabled] = React.useState(true);

    return (
        <SafeAreaView style={styles.container}>
            <FlatList
                data={items}
                renderItem={({ item }) => <Item 
                                            title={item.title}
                                        />}
                keyExtractor={item => item.id}
                ItemSeparatorComponent={() => <Divider style={{ backgroundColor: 'blue' }}/> }
            />
        </SafeAreaView>
    );

}

const styles = StyleSheet.create({
   container:{
       width:"100%"
   }
});

我的项目：

import React from 'react';
import {StyleSheet, View, Text, Animated, PanResponder} from 'react-native';
import Layout from '../constants/Layout'

export default function Item(props) {

  const width = Layout.width;
  const gestureDelay = 50;
  const pan = new Animated.ValueXY();

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => false,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
    onPanResponderTerminationRequest: (evt, gestureState) => false,
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: () => true,
    onPanResponderMove: (evt, gestureState) => {
      if(gestureState.dx > gestureDelay){
        pan.setValue({x:gestureState.dx - gestureDelay,y:0})
      }
    },
    onPanResponderRelease: (evt, gestureState) => {

      Animated.timing(
        pan,
        {
          toValue:{x:0,  y: 0}
        }
      ).start();

    }
  });

  return(
   <View style={styles.item}>
      <Animated.View
      style={{
              transform: [{ translateX: pan.x }, { translateY: pan.y }]
            }}
      {...panResponder.panHandlers}
      >
        <View style={styles.absoluteCell}>
          <Text style={styles.absoluteCellText}>DELETE</Text>
        </View>
        <View style={styles.innerCell}>
          <Text>{props.title}</Text>
        </View>
      </Animated.View>
    </View>
  )

}

const styles = StyleSheet.create({
  item: {
    height: 80,
    marginLeft: -100,
    justifyContent: 'center',
    backgroundColor: 'red',
    width: Layout.width
  },
  title: {
    fontSize: 32,
  },
  absoluteCell: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    width: 100,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  innerCell: {
    height: 80,
    marginLeft: 100,
    backgroundColor: 'yellow',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

如您所见，我尝试添加：

onStartShouldSetPanResponder: (evt, gestureState) => false,
onStartShouldSetPanResponderCapture: (evt, gestureState) => false,
onPanResponderTerminationRequest: (evt, gestureState) => false,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true

就像我在论坛上阅读过一些问题一样。

如果您有任何想法，谢谢您的帮助：）

Answer 1

经过思考和阅读文档，我有了一个主意！

{{1}}

它将解决触摸和滚动问题。

FlatList + PanResponder不滚动

1 个答案: