我有一个
MapView
,我正在尝试渲染一个位置按钮,该按钮当前在标注中渲染并显示“查找我”。代码如下。
按钮显示良好,但我无法让 onPress 工作:当我单击“Find Me”时,“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"
}
});
Callout
必须是MapView
的兄弟姐妹,而不是孩子。
(一年后根据要求更新详细信息)
这就是
Callout
成为孩子的含义:
<MapView>
<Callout/>
</MapView>
这就是
Callout
成为兄弟姐妹的含义:
<MapView/>
<Callout/>
您确定要将其作为 MapView 的兄弟,而不是 Marker 吗? docs 明确提到了示例代码库
import { Callout } from 'react-native-maps';
<Marker coordinate={marker.latlng}>
<MyCustomMarkerView {...marker} />
<Callout>
<MyCustomCalloutView {...marker} />
</Callout>
</Marker>
此外,我已经尝试过你的“解决方案”,但它只是在地图中间呈现一个按钮。相反,我想我们大多数人都希望在用户单击标记时呈现它。
基于 https://github.com/react-native-maps/react-native-maps/issues/2223,看起来
Android
和 iOS
需要 2 个不同的事件处理程序。
Android
<Marker
onCalloutPress={() => eventHandler()}
>
iOS
<Callout
onPress={() => eventHandler()}