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

Question

我正在尝试创建一个对齐间隔的水平 ScrollView。我只希望它一次滚动一个 item/element，无论对他们的滑动手势施加多大的力。

我试过在 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

使用 'pagingEnabled' scrollView 的属性。那会解决你的问题。同时删除 snapToAlignment 和 snapToInterval props

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

How to prevent scrolling multiple elements in React-Native ScrollView?

react-native

react-native-android

react-native-ios