LongPress上的TouchableOpacity会拦截平面列表滚动

Question

我在FlatList行中的TouchableOpacity组件上使用onLongPress时遇到问题。任何时候滚动平面列表时，onLongPress方法都会触发。onPress方法没有这个问题，我可以使用它，但这并不理想。

我尝试过打乱TouchableOpacity的delayPressIn值，但我尝试过的都没有帮助。

我还考虑过在滚动开始时设置一个标志，以便我可以签入onLongPress方法，但FlatList上的onScroll、onScrollEndDrag或onScrollBeginDrag方法都不起作用。

有人有解决滚动问题或onScroll事件的想法吗？如果这是一个错误，如果必须的话，我可以使用onPress事件。

版本：React 0.55.4，NativeBase:2.8.1

'use strict';
import React, {Component} from 'react';
import {StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import {Container, Content, View, Text} from 'native-base';
import MainHeader from '../MainHeader';
export default class PageVehicleList extends Component {
constructor(props) {
super(props);
this.state = {
title: 'Vehicle List',
dataSource: [],
isRefreshing: false,
};
}
componentDidMount() {
this._listenForItems();
}
_listenForItems() {
console.log('_listenForItems');
new ServerRequest(
'get_vehicles.php',
null,
(data) => {this._getData(data)},
(error) => {this._errorGettingData(error)}
);
}
_getData(data) {
console.log('_getData: ', data);
this.setState({
dataSource: data,
isRefreshing: false
});
}
_errorGettingData(error) {
console.log('_errorGettingData: ' + error);
this.setState({isRefreshing: false});
}
_onClick_add = () => {
this.props.navigation.navigate('PAGE_VEHICLE_ADD');
}
_onLongClick_vehicle = (data) => {
console.log('_onLongClick_vehicle - data: ', data);
console.log('this.state.isRefreshing: ', this.state.isRefreshing);
this.props.navigation.navigate('PAGE_VEHICLE_ADD', {serial: data});
}
_onRefresh() {
console.log('_onRefresh');
this.setState({
isRefreshing: true
});
this._listenForItems();
}
render() {
return (
<Container>
<MainHeader title={this.state.title} func_add={this._onClick_add}/>
<Content>
<FlatList
data={this.state.dataSource}
style={styles.listview}
renderItem={(data) => this._renderRow(data)}
ItemSeparatorComponent={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
keyExtractor={item => item.serial.toString()}
onRefresh={() => this._onRefresh()}
refreshing={this.state.isRefreshing}
onScroll={() => {console.log('onScroll');}}
onScrollEndDrag={() => {console.log('onScrollEndDrag');}}
onScrollBeginDrag={() => {console.log('onScrollBeginDrag');}}
/>
</Content>
</Container>
);
}
_renderRow(data) {
console.log('_renderRow - data: ', data);
return (
<TouchableOpacity
onLongPress={() => {this._onLongClick_vehicle(data.item.serial)}}
>
<View style={styles.container}>
<View style={styles.col1}>
<View style={styles.row}>
<Text style={styles.title}>Name:</Text>
<Text style={styles.value} numberOfLines={1}>{data.item.name}</Text>
</View>
<View style={styles.row}>
<Text style={styles.title}>Year:</Text>
<Text style={styles.value} numberOfLines={1}>{data.item.model_year}</Text>
</View>
<View style={styles.row}>
<Text style={styles.title}>Miles:</Text>
<Text style={styles.value} numberOfLines={1}>{data.item.miles}</Text>
</View>
<View style={styles.row}>
<Text style={styles.title}>Make:</Text>
<Text style={styles.value} numberOfLines={1}>{data.item.make_model}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
listview: {
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
},
col1: {
flex: 1,
flexDirection: 'column',
},
col2: {
flex: 1,
flexDirection: 'column',
},
row: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
title: {
fontSize: 12,
color: 'blue',
marginRight: 10,
},
value: {
fontSize: 10,
flex: 1,
}
});

Answer 1

为未来的读者回答我自己的问题。

在调查FlatList下拉时刷新的另一个问题时，我偶然发现一篇帖子说NativeBase中的Content组件只是一个包装好的ScrollView。我记得在其他地方读过一些关于嵌套ScrollViews问题的文章。我将内容组件更改为纯视图(NativeBase视图(，这解决了这两个问题。我的下拉刷新开始工作，以及onLongPress/滚动问题。