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道具

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

1 个答案: