如何防止在React-Native ScrollView中滾動多個元素？

Question

我正在嘗試創建一個固定到一個間隔的水平ScrollView。 我只希望它一次滾動一個項目/元素，而不管對其滑動手勢施加多大的力。

我試過使用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'屬性。 那將解決您的問題。 還要刪除snapToAlignment和snapToInterval道具