react-native - MapView Callout onPress 未触发
问题描述
我有一个MapView
from,我正在尝试渲染一个位置按钮,该按钮当前在标注中渲染并显示“找到我”。代码如下。
该按钮显示良好,但我无法让 onPress 工作:当我单击“查找我”时,既没有记录“callout hello”或“button hello”日志语句,所以没有按下任何内容(按钮没有t 在印刷机上显示任何不透明度)。
我也尝试过渲染没有标注的按钮。它显示但仍未按下。
帮助!
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/>