首页 > 解决方案 > FlatList + PanResponder 无滚动

问题描述

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

就像我在论坛中阅读了一些问题一样。

如果您有任何想法,感谢您的帮助:)

标签: react-nativescrollreact-native-flatlist

解决方案


经过一番思考和阅读文档后,我有了一个想法!

onMoveShouldSetPanResponder: (evt, gestureState) => {
    return gestureState.dx != 0 && gestureState.dy != 0;
}

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


推荐阅读