FlatList + PanResponder Нет прокрутки - PullRequest
Новая
       29

FlatList + PanResponder Нет прокрутки

0 голосов
/ 12 апреля 2020

У меня есть пункт рендеринга FlatList, который получил PanResponder. Если я очень быстро проведу пальцем от бота к началу, список прокручивается, если я go медленнее получаю событие 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

Мне нравится Я читал некоторые вопросы на форуме.

Если у вас есть идеи, спасибо за помощь:)

1 Ответ

0 голосов
/ 13 апреля 2020

После некоторых размышлений и прочтения do c у меня появилась идея! 

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

Это решит проблему касания и прокрутки.

...