无法使用 useRef 钩子访问 React Native 中的 scrollToIndex() 方法

Question

我正在尝试使用功能组件中的useRef钩子从 FlatList 访问scrollToIndex()方法或scrollToItem()方法。 我希望能够在我的组件中使用flatListRef.current.ScrollToIndex()，类似于基于类的组件使用this.flatListRef.ScrollToIndex()的方式：

const flatListRef = useRef(React.createRef)
<FlatList 
data={items}
renderItem={({ item }) => <Item item={item} />}
keyExtractor={item => item.id.toString()}
contentContainerStyle={styles.card}
horizontal={true}
showsHorizontalScrollIndicator={false}  
ref={flatListRef}                      
/>

console.loggingflatListRef.current没有显示我正在寻找的上述方法。

Answer 1

不需要用createRef创建 ref，只需使用useRef()即可。另一个重要的事情是正确使用scrollToIndex。请参阅下面的文档和代码。

法典：

const CustomFlatList = () => {
const flatListRef = useRef(); // useRef 
return (
<View>
<FlatList 
data={items}
renderItem={({ item }) => <Text style={{width: 100}}> {item.id} </Text> }
keyExtractor={item => item.id.toString()}
contentContainerStyle={styles.card}
horizontal={true}
showsHorizontalScrollIndicator={false}  
ref={flatListRef} // create ref                
/>
<TouchableHighlight onPress={() => flatListRef.current.scrollToIndex({index: 4, animated: true })}>
<Text> ScrollToIndex </Text>
</TouchableHighlight>
</View>
)
}

工作示例：

https://snack.expo.io/B1rfdbsuS