javascript - React Native Maps FlatList scrollToIndex() 不是函数/未定义

Question

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

我的代码的基础是这样的......

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...

看起来，为了像我在组件上方创建的动画那样使用带有私有(private)变量的 Ref，您需要在调用它时使用 getNode()。

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

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