Блог

У меня есть большое представление прокрутки, которое содержит различные изображения и текстовые элементы. В настоящее время, когда я нажимаю на маркер карты в своем представлении карты, в окне прокрутки ниже отображается выбранный в данный момент маркер. Проблема в том, что при изменении этого представления прокрутка по-прежнему остается прокрученной вниз, что означает, что пользователи могут быть потеряны. Я хотел бы сбрасывать вид прокрутки наверх каждый раз, когда данные повторно отображаются, чтобы отобразить информацию о другом маркере карты.

Вот как я попытался это сделать, основываясь на других примерах:

 function Map() {

......
// Creating Ref for ScrollView
   const scrollViewRef = React.createRef();

   const pressMarker = (i) => {
      setCurrentMarker(i);
      console.log(CurrentMarker) // Log the current data of marker displayed
      this._map.animateToRegion({
         latitude: i.Latitude,
         longitude: i.Longitude,
         latitudeDelta: 0.0015,
         longitudeDelta: 0.0015,
       });
    // Below: trying to trigger scrollview to return to top when marker is pressed.
       scrollViewRef?.current?.useScrollToTop;
    // I have tried this method also with no succes:
       scrollViewRef.current?.scrollTo(0, 0, true);

      return(CurrentMarker)
    };
.....
<MapView
        initialRegion={{ latitude: ******, longitude: ********, latitudeDelta: 0.01, longitudeDelta: 0.01 }}
        style={{ flex: 1, minHeight: windowHeight }}
        provider={PROVIDER_GOOGLE}
        customMapStyle={mapStyle}
        showsUserLocation={true}
        ref={(map) => (this._map = map)}
      >
        {users.map((i, index) => (
          <Marker key={index} onPress = {() => pressMarker(i)}
            coordinate={{ latitude: i.Latitude, longitude: i.Longitude }}
            title={i.Title} 
          />
        ))}
      </MapView>

      <View style={styles.expandingView}>
         <TouchableOpacity style={styles.touchableButton } onPress={toggleCollapsed}>
            <Text style={styles.markerTitle}>{CurrentMarker.PreviewTitle}</Text>
            <Image source={require("../assets/upArrowWhite.png")} style={styles.arrowLogo}></Image>
         </TouchableOpacity>
         <Animated.View style={{maxHeight: animationHeight}}>
            <ScrollView style={styles.scrollviewContainer}
               ref={scrollViewRef} // Assigning Scrollview Ref
            >
               <View style={{bottom: 0, flex: 1, paddingBottom: 900, height: '100%'}}>
                  <View style={styles.ImageContainer}>
                     <Image style={styles.markerImage} source={{ url: CurrentMarker.ImageUrl }}/>
                     <Text style={styles.imageComment}>{CurrentMarker.ImageComment}</Text>
                  </View>
                  <View>
                     <Text style={styles.markerTitleScrollview}>{CurrentMarker.Title}</Text>

                  </View>
               </View>
            </ScrollView>
         </Animated.View>
      </View>
.......
 

Однако этот метод, по-видимому, не является эффективным. Я думал, что это будет относительно легко, так как мне не нужно добавлять прослушиватели событий или что-то еще, я просто хочу, чтобы вид прокрутки возвращался наверх при нажатии на маркер, функция, которая уже эффективно работает заранее.