Прокрутка React Native FlatList к отрицательному смещению - PullRequest
Новая
       47

Прокрутка React Native FlatList к отрицательному смещению

2 голосов
/ 27 марта 2020

У меня есть FlatList, и я реализую пользовательский пул для обновления sh, и идея состоит в том, чтобы прокрутить его до отрицательного смещения, чтобы показать анимацию под ним при выпуске. Вот код для моего FlatList. 

const flatListRef = useRef(null);

const handleRelease = () => {
    flatlistRef.current.scrollToOffset({ y: -100 });
    setTimeout(() => {
        flatlistRef.current.scrollToOffset({ y: 0 });
    }, 1000)
}

return (
    <FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
    />  
)

. После освобождения FlatList должен прокрутиться до смещения -100, чтобы показать анимацию внизу, а затем прокрутиться вверх через 1 секунду. Но происходит прокрутка до смещения 0 (я могу сказать, потому что я попытался прокрутить вниз сразу после отпускания, он сразу попытается прокрутить назад).

Возможно ли программно прокрутить FlatList с отрицательным смещением?

1 Ответ

1 голос
/ 27 марта 2020

Похоже, вам нужно установить для scrollToOverflowEnabled значение true, чтобы применить это поведение.

ScrollView (Flatlist наследует реквизиты ScrollView)

PS: здесь другая идея. Может быть, вы можете добавить вид с фиксированной высотой, если вы хотите go до -100. (выглядит так же) И спустя время закройте вид. (вернуться в исходное положение?) (Если это не работает ....)

------------------ edit ----- 

<FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
        scrollToOverflowEnabled={true}  // Just put in here 
    />
...