[英]How can I pass a ref to a react-native-reanimated component?
我正在尝试使用与以下代码块类似的方法将 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}
/>
)
})
库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}
/>
)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.