У меня проблема с использованием onLongPress для компонента TouchableOpacity в строке FlatList. Каждый раз, когда вы идете, чтобы прокрутить FlatList, метод onLongPress срабатывает. Метод onPress не имеет этой проблемы, и я мог бы использовать это вместо этого, но это не было бы идеально.
Я пробовал возиться со значением delayPressIn для TouchableOpacity, но ничего из того, что я пробовал, не помогает.
Я также думал об установке флага при запуске прокрутки, чтобы я мог проверить в методе onLongPress, но ни один из методов onScroll, onScrollEndDrag или onScrollBeginDrag в FlatList не работает.
У кого-нибудь есть идеи по устранению проблемы с прокруткой или событий 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,
}
});