Question

我正在使用顶部带有动画FlatList的React Native地图，当我按下地图标记时，我希望列表滚动到该特定索引。但是，当我尝试这样做时，会出现此错误_this.flatListRef.scrollToIndex is not a function. '_this.flatListRef.scrollToIndex' is undefined

我的代码基础看起来像这样...

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}
             />
         }
  }

}

主要是由于某种原因，我的flatListRef引用似乎未定义。至少那是我的理论，但我不知道为什么。

有人可以在这里发现我在做什么错吗？

如果有帮助，allProperties是从graphql查询返回的数据。

Answer 1

万一有人发现这个帖子并且遇到同样的问题（或者稍后我忘记了），我会找到答案here...

看起来，为了使用带有私有变量的Ref（例如我在组件上方创建的动画变量），在调用它时需要使用getNode()。

例如，在我的scrollToCard()函数中，它应该执行以下操作...

this.flatListRef.getNode().scrollToIndex({index})

React Native Maps FlatList scrollToIndex（）不是函数/未定义

1 个答案: