react-native - 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
就像我在论坛中阅读了一些问题一样。
如果您有任何想法,感谢您的帮助:)
解决方案
经过一番思考和阅读文档后,我有了一个想法!
onMoveShouldSetPanResponder: (evt, gestureState) => {
return gestureState.dx != 0 && gestureState.dy != 0;
}
它将解决触摸和滚动问题。
推荐阅读
- scala - 如何使用 Spark 在 DataFrame 中添加额外的日期列?
- nestjs - When using nested subscribers app will crash (NestJs+TypeOrm+Mysql)
- javascript - Plotly react. The annotation disappears after changing border color
- cluster-computing - Tile38 - Sharding across multiple/disparate instantiations
- excel - Looping through Macro to sort through column of data
- typescript - Isolate cause of Typescript max recursion error with getAwaitedTypeWorker => getAwaitedType => mapType
- .net-core - .Net Core The name 'Host' does not exist
- jquery - 防止用户注册不同的电子邮件域
- reactjs - How to fetch data after a specific Interval with useState, useEffect and useCallback in React with proper dependencies
- php - HTML - 输入字段跳出 html 表格