我目前有一个地图和一个旋转木马(类似于FlatList
),我希望能够使用scrollToIndex
的FlatList
方法捕捉到数组中的某个项目。问题是当我采用基于ScrollView
的react-native-snap-carousel库时,我失去了使用scrollToIndex
方法的能力。滚动到特定索引的功能与FlatList
完美配合。
我使用的是功能组件,所以使用的是useRef
钩子:
const flatListRef = useRef()
const handleMarker = index => {
flatListRef.current.scrollToIndex({ index, animated: true })
}
我在地图上使用
react-native-maps
,上面的handleMarker
是这样,当用户单击地图上的标记时,轮播会捕捉到相关项目:<Marker
key={marker.id}
coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
onPress={() => handleMarker(index)}
ref={markerRef[index]}
>
</Marker>
以下是替换
FlatList
的轮播:<Carousel
data={items}
renderItem={({ item }) => <Item item={item}/>}
horizontal={true}
ref={flatListRef}
sliderWidth={width}
sliderHeight={100}
itemWidth={140}
itemHeight={100}
/>
没有
scrollToIndex
怎么实现呢? 最佳答案
尝试改用提供的方法
const handleMarker = index => {
flatListRef.current.snapToItem(index);
}
参考:https://github.com/archriss/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#available-methods