在 onScrollEndDrag 道具中，scrollToIndex 函数在 FlatList 中不起作用

Question

我想要的是当我在 FlatList 组件中拖动时，它会根据拖动将我带到下一个/上一个项目。所以，这就是为什么我使用 onScrollEndDrag 道具来获取速度，如果拖动导致向上，那么我将通过 scrollToIndex 方法将 flatlist 导航到该索引。但它没有带我去那个项目。他们还有其他方法吗？？？

import React from 'react';
import { View, Text, StyleSheet, AppState, FlatList, Dimensions } from 'react-native';
import fetchDataFromDirectory from '../data/fetchDataFromWhatsApp';
import PlayerVideo from '../components/VideoPlayer';
import Image from '../components/Image';

const { width, height } = Dimensions.get('window');

class VideoScreen extends React.Component {
    state = {
        pdfInfo: [], //[{id, name, path},...]
        appState: '',
        viewableIndex: 0
    }

    fetchData = async () => {
        const data = await fetchDataFromDirectory();
        this.setState({ pdfInfo: data.pdfInfo });
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.pdfInfo.length > this.dataLength) { //We are seeing if we need to scroll to top or not
            this.dataLength = this.state.pdfInfo.length;
            try {
                this.list.scrollToIndex({ animated: true, index: 0, viewPosition: 0 })
            } catch (err) {

            }
        }
    }

    handleAppStateChange = (nextAppState) => {
        //the app from background to front
        if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
            this.fetchData();
        }
        //save the appState
        this.setState({ appState: nextAppState });
    }

    componentDidMount() {
        this.videoHeight = height;
        this.dataLength = 0;
        this.fetchData();
        AppState.addEventListener('change', this.handleAppStateChange);
    }

    onViewableItemsChanged = ({ viewableItems, changed }) => {
        // console.log("Visible items are", viewableItems);
        // console.log("Changed in this iteration", changed);
        try {
            this.setState({ viewableIndex: viewableItems[0]['index'] })
        } catch (err) {

        }
    }

    componentWillUnmount() {
        AppState.removeEventListener('change', this.handleAppStateChange)
    }

    render() {
        return <FlatList
            onLayout={(e) => {
                const { height } = e.nativeEvent.layout;
                this.videoHeight = height;
            }}
            snapToAlignment={'top'}
            decelerationRate={'fast'}
            // onScroll={(e) => console.log('+++++++++++++++++',Object.keys(e), e.nativeEvent)}
            onScrollEndDrag={(e) => {
                // this.list.setNativeProps({ scrollEnabled: false })
                console.log(e.nativeEvent)
                if (e.nativeEvent.velocity.y > 0.1) {
                    console.log('go to above')
                    this.list.scrollToIndex({animated: true, index: this.state.viewableIndex - 1, viewPosition: 0})
                } else if (e.nativeEvent.velocity.y < -0.9){
                    console.log('go to below')
                    this.list.scrollToIndex({animated: true, index: this.state.viewableIndex + 1, viewPosition: 0})
                }
                // this.list.setNativeProps({ scrollEnabled: true })
                console.log('h1')
            }}
            viewabilityConfig={{
                // itemVisiblePercentThreshold: 90,
                viewAreaCoveragePercentThreshold: 60
            }}
            // extraData={this.state.viewableIndex}
            onViewableItemsChanged={this.onViewableItemsChanged}
            // scr
            contentContainerStyle={styles.screen}
            data={this.state.pdfInfo}
            keyExtractor={item => item.id}
            ref={ref => this.list = ref}
            renderItem={({ item, index }) => {
                // console.log(index)
                console.log('--------------------> ', this.state.viewableIndex)
                if (item.name.split('.')[1] == 'jpg') return <Image source={item.path} refList={this.list} index={index} isViewable={this.state.viewableIndex == index ? true : false} />
                return <PlayerVideo
                    source={item.path}
                    refList={this.list}
                    height={this.videoHeight}
                    index={index}
                    isViewable={this.state.viewableIndex == index ? true : false} />
            }}
            
                </View>
            }}
        />
    }
}

export default VideoScreen;

const styles = StyleSheet.create({
    screen: {
        backgroundColor: '#111212',
        // flex: 1
    }
})