Question

我在FlatList行中的TouchableOpacity组件上使用onLongPress时遇到问题。每当您滚动FlatList时，就会触发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 / scroll问题开始起作用。

TouchableOpacity onLongPress截取FlatList滚动

1 个答案: