如何在 Scrollview 的 Scroll 或 onScollEnd 等上捕获事件答案

【问题标题】：How catch event onScoll or onScollEnd etc of HScrollview如何在 Scrollview 的 Scroll 或 onScollEnd 等上捕获事件
【发布时间】：2021-10-26 15:25:22
【问题描述】：

我正在使用

import {CollapsibleHeaderTabView} from "react-native-tab-view-collapsible-header";
import {HScrollView} from "react-native-head-tab-view";

我将一个 FlastList 推入 HScrollView

<HScrollView
                    index={0}
                    style={{backgroundColor: "#FFFFFF"}}
                    // onScroll={(event)=>console.log("hitme2")}
                    // onScroll={()=>console.log("hitme")}
                >


                    <FlatList
                        data={DATA}
                        renderItem={renderItem}
                        keyExtractor={item => item.id}
                        onEndReached={onEndReached}
                    />
</>

flashlist 的事件 onEndReached 将不起作用，而不是滚动关闭 Hscrollview 起作用。

我想让 Hscollview 的 catch 事件自定义相同的 onEndReached。

请帮帮我！

反应：“16.13.1”

React Native：“https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz”

React-Native-Gesture-Handler: "^1.10.3"

【问题讨论】：

标签： reactjs react-native react-native-tab-view

【解决方案1】：

你很幸运，因为我最近遇到了类似的问题并找到了解决方案:)

// imports
import React, {useCallback} from "react";
import {runOnJS, useAnimatedReaction, useSharedValue} from "react-native-reanimated";
import {CollapsibleHeaderTabView} from "react-native-tab-view-collapsible-header";

// component logic
const doSomething = useCallback((...args) => {/* do something */}, []);

const [scrollTrans, setScrollTrans] = useState(useSharedValue(0));

useAnimatedReaction(() => scrollTrans.value, (scrollTransValue) => {
    console.log('scroll value', scrollTransValue);
    /* do something here */
    runOnJS(doSomething)(/* put args here */);
}, [doSomething, scrollTrans]);

const makeScrollTrans = useCallback((scrollTrans) => {
    setScrollTrans(scrollTrans);
}, []);

// CollapsibleHeaderTabView
<CollapsibleHeaderTabView {...args} makeScrollTrans={makeScrollTrans}/>

你需要在 runOnJS 函数中调用一些函数，因为 react-native-reanimated 因为 v2 在不同的线程上运行

另外，您可以像这样使用HFlatList，而不是HScrollView：

<HFlatList
    index={0}
    data={data}
    renderItem={renderItem}
    keyExtractor={keyExtractor}
    onEndReached={onEndReached}
    {/* rest FlatList props */}
/>

【讨论】：