Выноска MapView onPress не запускается

У меня есть MapView от, и я пытаюсь отобразить кнопку местоположения, которая в настоящее время отображается в выноске и говорит: «Найди меня». Код ниже.

Кнопка отображается красиво, но я не могу заставить работать onPress: когда я нажимаю «Найди меня», ни операторы журнала «callout hello», ни «button hello» не регистрируются, поэтому ничего не было нажато (кнопка не нажимается) не показывать непрозрачность при нажатии).

Я также пробовал визуализировать кнопку без выноски. Он отображается, но все еще не нажат.

Помощь!


import React, { Component } from "react";
import { MapView } from "expo";
import { View, Button } from "react-native";
import { BLText } from "../components/StyledComponents";
import F8StyleSheet from "../components/F8StyleSheet";
import { connect } from "react-redux";
const { Marker, Callout } = MapView;
import { getLocationAsync } from "../redux/actions/userActions";

FindMeButton = ({ onPress }) => {
  return (
    <Callout
      style={styles.locationButtonCallout}
      onPress={() => console.log("callout hello")}
    >
      <Button
        onPress={() => console.log("button hello")}
        title={"Find Me"}
        style={styles.locationButton}
      />
    </Callout>
  );
};

class MapScreen extends Component {
  static navigationOptions = {
    title: "Nearby Stations"
  };

  renderMarkers() {
    return (markers = Object.keys(this.props.stations).map(key => {
      const station = this.props.stations[key];
      return (marker = (
        <Marker
          key={key}
          // onPress={this.onMarkerPress.bind(this, station)}
          coordinate={{
            latitude: Number(station.location.lat),
            longitude: Number(station.location.lng)
          }}
        >
          <Callout
            onPress={() => {
              this.props.navigation.navigate("ListScreen");
              // this.props.navigation.navigate("StationDetail", {
              //   title: station.title
              // });
            }}
          >
            <BLText>{station.title}</BLText>
          </Callout>
        </Marker>
      ));
    }));
  }

  render() {
    console.log("rendering at region:", this.props.userLocation);

    return (
      <View style={styles.container}>
        <MapView
          provider={MapView.PROVIDER_GOOGLE}
          style={{ flex: 1 }}
          region={this.props.userLocation}
          showsUserLocation={true}
        >
          {this.renderMarkers()}
          <FindMeButton onPress={this.props.getLocationAsync} />
        </MapView>
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    stations: state.main.stations,
    userLocation: state.main.currentRegion
  };
};

export default connect(
  mapStateToProps,
  { getLocationAsync }
)(MapScreen);

const styles = F8StyleSheet.create({
  locationButtonCallout: {
    borderRadius: 0,
    opacity: 0.8,
    backgroundColor: "lightgrey",
  },
  locationButton: {
    backgroundColor: "lightgrey",
    borderRadius: 10,
    opacity: 0.8
  },
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center"
  }
});

react-native react-native-maps
person Jonathan Tuzman    schedule 10.05.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Решено: Callout должен быть родным братом MapView, а не дочерним элементом.

(обновление с деталями по запросу, год спустя)

Вот что Callout означает быть ребенком:

<MapView>
  <Callout/>
</MapView>

Вот что Callout означает быть родным братом:

<MapView/>
<Callout/>
person Jonathan Tuzman    schedule 13.05.2019
comment
Что вы имеете в виду, это должен быть брат MapView? Если да, то как это может быть Маркер? - person user3593261; 10.12.2019
comment
Не могли бы вы объяснить подробнее? - person Yogendra Patel; 08.01.2021

arrow_upward
0
arrow_downward

Вы уверены, что хотите использовать его как аналог MapView вместо Marker? Документы явно упоминает образец кодовой базы

import { Callout } from 'react-native-maps';

<Marker coordinate={marker.latlng}>
  <MyCustomMarkerView {...marker} />
  <Callout>
    <MyCustomCalloutView {...marker} />
  </Callout>
</Marker>

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

<Marker
  coordinate={{ latitude: 51.23123, longitude: 4.921321 }}
  description="Description"
  title="Title"
>
  <Callout style={styles.locationButtonCallout}>
    <Button
      onPress={() => alert("button hello")}
      title={"Callout Button"}
    />
  </Callout>
</Marker>

...
const styles = StyleSheet.create({
  locationButtonCallout: {
    borderRadius: 0,
    opacity: 0.8,
    backgroundColor: "lightgrey",
  },
});
person Daniel Danielecki    schedule 21.07.2021