Реагировать на собственные карты FlatList scrollToIndex () не является функцией / не определено

Question

Я работаю с картами React Native с анимированным FlatList сверху, и когда я нажимаю на маркер карты, я хочу, чтобы список прокручивался до этого конкретного индекса.Но когда я пытаюсь сделать это, я получаю эту ошибку _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}
             />
         }
  }

}

В основном, похоже, что мой ref из flatListRef не определенпо какой-то причине.По крайней мере, это моя теория, но я не могу сказать, почему.

Кто-нибудь может заметить, что я здесь делаю неправильно?

Если это поможет, allProperties - это данные, возвращаемые из graphqlзапрос.

Answer 1

В случае, если кто-то найдет этот пост и столкнется с той же проблемой (или для меня позже, когда я забуду), я нашел ответ здесь ...

Это выглядитнапример, чтобы использовать Ref с приватной переменной, такой как анимированная переменная, которую я создал над компонентом, вам нужно использовать getNode() при ее вызове.

Например, в моей функции scrollToCard() она должна была выполнить следующее ...

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