MapView 标注 onPress 未触发
MapView Callout onPress not triggering
我有一个 MapView
,我正在尝试呈现一个位置按钮,该按钮当前呈现在标注中并显示 "Find Me." 代码如下。
按钮显示得很好,但我无法让 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
的兄弟姐妹,而不是 child。
(根据要求更新细节,一年后)
Callout
成为 child 意味着:
<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>
此外,我已经尝试过您的“解决方案”,但它只是在地图中间呈现一个按钮。相反,我想我们大多数人都希望在用户点击标记时呈现它。两种我都试过了,肯定是第二种是大多数用户所期望的,那么代码片段就这么简单:
<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",
},
});
我有一个 MapView
,我正在尝试呈现一个位置按钮,该按钮当前呈现在标注中并显示 "Find Me." 代码如下。
按钮显示得很好,但我无法让 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
的兄弟姐妹,而不是 child。
(根据要求更新细节,一年后)
Callout
成为 child 意味着:
<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>
此外,我已经尝试过您的“解决方案”,但它只是在地图中间呈现一个按钮。相反,我想我们大多数人都希望在用户点击标记时呈现它。两种我都试过了,肯定是第二种是大多数用户所期望的,那么代码片段就这么简单:
<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",
},
});