如何將 ref 傳遞給 react-native-reanimated 組件？

Question

我正在嘗試使用與以下代碼塊類似的方法將 ref 傳遞給組件，但current值始終返回undefined 。 這種方法適用於來自 react-native 的普通FlatList ，但是一旦我使用Animated.FlatList或Animated.createAnimatedComponent(FlatList) ：

const Parent = () => {
    const flatListRef = useRef();

    useEffect(() => {
        console.log(flatListRef.current) // undefined
    })

    return (
        <View>
            <Child ref={flatListRef} />
        </View>
    )
}

const Child = React.forwardRef((props, ref) => {

    return (
        <Animated.FlatList
            ref={ref}
        />
    )
})

Answer 1

庫react-native-reanimated與react-native-animated相比有點不同。

如果我們通過Animated.createAnimatedComponent(FlatList)創建動畫組件，那么一切都會按預期進行。

這是您的代碼的工作版本。 為了測試目的，我已經記錄了FlatList ref 的 function scrollToIndex 。

import Animated from "react-native-reanimated"

const ReanimatedFlatList = Animated.createAnimatedComponent(FlatList);

const Parent = (props) => {
    const flatListRef = useRef(null);

    useEffect(() => {
      console.log(flatListRef.current.scrollToIndex)
    }, [])

    return (
        <View>
            <Child ref={flatListRef} />
        </View>
    )
}

const Child = React.forwardRef((props, ref) => {
    return (
        <ReanimatedFlatList
            ref={ref}
        />
    )
})