Как использовать onPress в компоненте React Native Maps - PullRequest
Новая
       6

Как использовать onPress в компоненте React Native Maps

0 голосов
/ 22 сентября 2018

Я пытаюсь изменить координаты моего MapView, когда я нажимаю на маркер, чтобы он центрировал.Таким образом, он может правильно отображать выноску.Я пытаюсь использовать animateToCoordinate, но ничего не происходит, и функция даже не показывает никаких журналов .. Что я делаю не так?

В моем компоненте, который содержит маркер, у меня есть следующее: 

class Place extends Component {
  fadeOut = () => {
    this._mapView.animateToCoordinate({
    latitude: 28.869236999,
    longitude: -81.234822999
   }, 2);
  }
  render() {
    return (
      <View>
        <Marker
          coordinate={{
            latitude: this.props.latitude,
            longitude: this.props.longitude
          }}
         onPress={() => this.fadeOut()}
        >
          <View onPress={() => this.fadeOut()}
            style={styles.markerWrap}>
            <View><Text style={styles.markerTitle}>{this.props.title}</Text></View>
            <View style={styles.marker} />
          </View>
          <Callout
            tooltip={true}
            style={styles.box}
          >
          <View style={styles.boxShadow}>
              <Text style={{ fontSize: 13, fontWeight: "600", marginBottom: 10}}>
                {this.props.title}
              </Text>
              <Text style={{ fontSize: 13, lineHeight: 18,}}>
                {this.props.description}
              </Text>
              <Button style={styles.button}>
                <Text style={styles.buttonText}>Se mer</Text>
              </Button>
          </View>
          </Callout>
        </Marker>

      </View>
    );
  }
}
export default Place;

Мой app.js 

<MapView
          style={styles.map}
          showUserLocation
          followUserLocation
          showsIndoors={false}
          showsTraffic={false}
          loadingEnabled={true}
          customMapStyle={MapStyle}
          region={this.getMapRegion()}
          provider="google"
          >
            <React.Fragment>
            <Place
              latitude={37.784362}
              longitude={-122.406872}
              title="Meny"
              description="Det er lett å lage gode kjøttfrie måltider. Her finner du både gode oppskrifter på vegetariske og veganske retter som passer til middag og lunsj, og hverdag og fest!"
            />
            <Place
              latitude={37.786562}
              longitude={-122.408872}
              title="Dwell"
              description="Det er lett å lage gode kjøttfrie måltider. Her finner du både gode oppskrifter på vegetariske og veganske retter som passer til middag og lunsj, og hverdag og fest!"
            />
            </React.Fragment>

      </MapView>

В настоящее время он не меняет координаты и показывает вот так:

enter image description here

Также хотелось бы иметь возможность использовать onDeselect для оживления Выноски.

1 Ответ

0 голосов
/ 23 сентября 2018

Решил это, добавив это к: 

ref={ map => { this.map = map }}

И используя его в качестве опоры для такого компонента: 

map={this.map}

Так что я могу использовать это так: 

  fadeOut = () => {
    this.props.map.animateToCoordinate({
      latitude: this.props.latitude,
      longitude: this.props.longitude
    }, 5);
  }
...