react-native - 无论捕捉速度如何，都需要在 Flatlist 中滚动单个项目 View

Question

我的代码适用于正常捕捉，但当快速捕捉时。它滚动多行。需要一个解决方案类似于 ios 原生 isPagingEnabled 标志或像 TikTok 应用视频滚动的东西。

这是我的代码

import React, { Component } from 'react';
import { View, FlatList, Text, Dimensions, StyleSheet, StatusBar } from 'react-native';


export default class Videos extends Component {

    static navigationOptions = ({ navigation, navigationOptions }) => {
        return {
            header: null
        };
     };

    constructor(){
        super();
        this.colorData = [
            'rgb(255,140,140)',
            'rgb(253,244,128)',
            'rgb(5,217,200)'
        ]
    }

    render() {
        return (
            <View>
                <StatusBar translucent={true} backgroundColor={'transparent'} />
                    <FlatList

                        horizontal={false}
                        decelerationRate={0}
                        snapToAlignment={"center"}
                        snapToInterval={Dimensions.get('screen').height}

                        data={this.colorData}
                        keyExtractor={(item, index) => `id_${index}`}
                        style={styles.fullScreen}
                        renderItem={({ item }) => <View style={[{...styles.fullHeight}, {backgroundColor: item}]}  />}
                    />
            </View>
        )
    }
}

let styles = StyleSheet.create({
    fullScreen: {
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height,
    },
    fullHeight: {
        width: '100%',
        height: Dimensions.get('screen').height
    }
});

它适用于普通滚动，但当从上到下用力滚动时，会滚动多个项目。我一次只需要滚动一行。

Answer 1

这就是最终对我有用的方法

<FlatList
  snapToAlignment={'top'}
  viewabilityConfig={{ itemVisiblePercentThreshold: 90 }}
  pagingEnabled={true}
  decelerationRate={'fast'}
  data={this.colorData}
  keyExtractor={(item, index) => `id_${index}`}
  initialNumToRender={maxVideosThreshold}
  style={inlineStyles.fullScreen}
  renderItem={this._renderItem}
  renderItem={({ item }) => <View style={[{ ...styles.fullHeight }, { backgroundColor: item }]} />}
/>