Как предотвратить прокрутку нескольких элементов в React-Native ScrollView? - PullRequest
Новая
       13

Как предотвратить прокрутку нескольких элементов в React-Native ScrollView?

0 голосов
/ 05 января 2019

Я пытаюсь создать горизонтальный 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,
    },
});

Вы можете видеть, что легкое короткое движение прокручивает один элемент, как и ожидалось. Но более длительное и сильное перелистывание приводит к пропуску элементов, а это не то, чего я ожидал.

1 Ответ

0 голосов
/ 05 января 2019

Используйте 'pagingEnabled' prop of scrollView. Это решит вашу проблему. Также удалите snapToAlignment и snapToInterval реквизиты

...