javascript - scrollToIndex() 不是函数

标签 javascript ios react-native carousel react-native-flatlist

我目前有一个 map 和一个旋转木马(类似于FlatList),我希望能够使用FlatListscrollToIndex 方法捕捉到阵列中的某个项目。问题是我何时采用了 react-native-snap-carousel库,它基于 ScrollView,我失去了使用 scrollToIndex 方法的能力。滚动到某个索引的功能在 FlatList 中运行得非常好。

我正在使用功能组件,所以我正在使用 useRef Hook :

    const flatListRef = useRef()
    const handleMarker = index => {
        flatListRef.current.scrollToIndex({ index, animated: true })
    }

我正在为我的 map 使用 react-native-maps 并且上面的 handleMarker 是这样的,当用户点击 map 上的标记时,Carousel 会捕捉相关项目:

<Marker
    key={marker.id}
    coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
    onPress={() => handleMarker(index)}
    ref={markerRef[index]}
>
</Marker>

以下是替换 FlatList 的 Carousel:

<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

关于javascript - scrollToIndex() 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59462489/

相关文章:

javascript - 转义通过 POST 发送的 jQuery 数据

ios - SVProgressHUD 没有显示在屏幕中央?

ios - Xcode 9 Beta 使用未声明的类型 'SKError'

javascript - React Native 0.18.1 在所有 View 上使用自定义字体

react-native - 如何使用 Flutter 或 React Native 访问 NFC 功能?

javascript - Jmeter,而 Controller 卡在请求上并且不循环

javascript - 从 C# 到 javascript 的等效正则表达式模式

c# - 使用 c# 的 Oauth 2.0 到 vimeo。下一步 : uploading a video to vimeo

ios - 异步获取图像Firebase Swift 5

node.js - React-Native 无法解析模块