0

我在 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,
    }
});
4

1 回答 1

1

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

在调查 FlatList 下拉刷新的另一个问题时，我偶然发现了一篇文章，指出 NativeBase 中的 Content 组件只是一个包装好的 ScrollView。我记得在其他地方读过一些关于嵌套 ScrollViews 问题的文章。我将我的内容组件更改为一个普通视图（NativeBase 视图），这解决了这两个问题。我对下拉的刷新以及 onLongPress/scroll 问题开始起作用。

于 2018-11-04T04:21:48.703 回答