我目前有一个地图和一个旋转木马(类似于FlatList),我希望能够使用scrollToIndexFlatList方法捕捉到数组中的某个项目。问题是当我采用基于ScrollViewreact-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

09-12 14:59