如何防止在 React-Native ScrollView 中滚动多个元素

Question

我正在尝试创建一个捕捉到间隔的水平滚动视图。我只希望它一次滚动一个项目/元素，无论对他们的滑动手势施加多大的力。

我尝试在 ScrollView 上使用可用的道具，它几乎完美地完成了我想要的，除了当施加更大的力量或更长的滑动时，多个元素会被滚动浏览。

我在这里做了一个关于世博会的小吃：https://snack.expo.io/BkKzYHpbE

import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Dimensions } from 'react-native';
const { width } = Dimensions.get('window');
export default class App extends Component {
    render() {
        return (
            <ScrollView 
                style={styles.container}
                horizontal= {true}
                decelerationRate={0}
                snapToInterval={width - 60}
                snapToAlignment={"center"}
                contentInset={{
                    top: 0,
                    left: 30,
                    bottom: 0,
                    right: 30,
                }}>
                <View style={styles.view} />
                <View style={styles.view2} />
                <View style={styles.view} />
                <View style={styles.view2} />
                <View style={styles.view} />
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    container: {},
    view: {
        marginTop: 100,
        backgroundColor: 'blue',
        width: width - 80,
        margin: 10,
        height: 200,
        borderRadius: 10,
    },
    view2: {
        marginTop: 100,
        backgroundColor: 'red',
        width: width - 80,
        margin: 10,
        height: 200,
        borderRadius: 10,
    },
});

您可以看到轻轻、短暂的滑动将按预期滚动一个元素。但是更长、更有力的滑动会导致元素被跳过，这不是我所期望的。

Answer 1

使用 scrollView 的 'pagingEnabled' prop。这将解决您的问题。同时移除snapToAlignment和snapToInterval道具