reactjs - 如何捕捉 HScrollview 的 onScoll 或 onScollEnd 等事件

Question

我在用

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”

反应原生：“https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz”

React-Native-Gesture-Handler：“^1.10.3”

Answer 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 在不同的线程上运行

此外，HScrollView您可以HFlatList这样使用：

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