如何将 ref 传递给 react-native-reanimated 组件？

Question

我正在尝试使用与以下代码块类似的方法将 ref 传递给组件，但 current 值始终 returns 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-animated 相比，库 react-native-reanimated 的工作方式略有不同。

如果我们通过 Animated.createAnimatedComponent(FlatList) 创建动画组件，那么一切都会按预期进行。

这是您的代码的工作版本。为了测试目的，我已经记录了 FlatList ref 的函数 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}
        />
    )
})

如何将 ref 传递给 react-native-reanimated 组件？

How can I pass a ref to a react-native-reanimated component?

javascript

reactjs

react-native

react-native-reanimated

react-native-reanimated-v2