[英]React Native Maps FlatList scrollToIndex() not a function / undefined
I'm working with React Native maps with an animated FlatList on top and when I press on a map marker, I want the list to scroll to that particular index. 我正在使用顶部带有动画FlatList的React Native地图,当我按下地图标记时,我希望列表滚动到该特定索引。 But when I try to do that I get this error _this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined
但是,当我尝试执行此操作时,出现此错误_this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined
_this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined
The basics of my code look like this... 我的代码基础看起来像这样...
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
export default Map extends component {
scrollToCard = index => {
this.flatListRef.scrollToIndex({index})
}
render() {
const { allProperties } = this.props;
<MapView
ref={map => this.map = map}
style={styles.map}
initialRegion={{
latitude: 35.2271,
longitude: -80.8431,
latitudeDelta: 0.0922,
longitudeDelta: 0.421
}}
>
{allProperties && allProperties.map((property, index) => (
<Marker
coordinate={property.coordinates}
title={property.propertyName}
pinColor={theme.COLOR_GREEN}
key={property.id}
onPress={() => this.scrollToCard(index)}
/>
))}
</MapView>
{allProperties &&
<AnimatedFlatList
ref={ref => {this.flatListRef = ref }}
data={allProperties}
getItemLayout={(data, index) => (
{length: CARD_WITH_MARGIN, offset: CARD_WITH_MARGIN * index, index}
)}
initialNumToRender={2}
horizontal
scrollEventThrottle={1}
showsHorizontalScrollIndicator={false}
snapToInterval={CARD_WITH_MARGIN}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {
x: this.animation
},
},
},
],
{ useNativeDriver: true }
)}
style={styles.scrollView}
contentContainerStyle={styles.scrollContainer}
renderItem={this._renderItem}
keyExtractor={item => item.id}
/>
}
}
}
Mainly it seems like my ref of flatListRef is undefined for some reason. 主要是由于某种原因,我的flatListRef引用似乎未定义。 At least that's my theory but I can't tell why. 至少那是我的理论,但我不知道为什么。
Can anyone spot what I'm doing wrong here? 有人可以在这里发现我在做什么错吗?
If it helps, allProperties
is data coming back from a graphql query. 如果有帮助,则allProperties
是从graphql查询返回的数据。
In case anyone finds this post and is having the same issue (or for me later on when I forget), I've found the answer here... 万一有人发现这篇文章并遇到相同的问题(或者稍后我忘记了),我会在这里找到答案...
It looks like, in order to use a Ref with private variable like the animated one I created above the component, you need to use getNode()
when you call it. 看起来,为了使用带有私有变量的Ref(例如我在组件上方创建的动画变量),您需要在调用它时使用getNode()
。
For instance, in my scrollToCard()
function it should have done the following... 例如,在我的scrollToCard()
函数中,它应该执行以下操作...
this.flatListRef.getNode().scrollToIndex({index})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.