Javascript 反应本机-反应本机映射初始区域不工作
我使用react native maps为iOS设备集成了Google Map。我有一个问题,那就是重新渲染贴图后initialRegion不起作用 我的应用程序只包含两个组件:来自react native maps的MapView和一个按钮。单击按钮以显示或隐藏地图 这是我的密码:Javascript 反应本机-反应本机映射初始区域不工作,javascript,ios,google-maps,react-native,react-native-maps,Javascript,Ios,Google Maps,React Native,React Native Maps,我使用react native maps为iOS设备集成了Google Map。我有一个问题,那就是重新渲染贴图后initialRegion不起作用 我的应用程序只包含两个组件:来自react native maps的MapView和一个按钮。单击按钮以显示或隐藏地图 这是我的密码: render() { return ( <View style={styles.mapContainer}> {this.renderMap()}
render() {
return (
<View style={styles.mapContainer}>
{this.renderMap()}
<TouchableOpacity
onPress={this.onButtonPress.bind(this)}
style={styles.showMapButtonContainer}>
<Text style={styles.showMapButtonText}>Show and Hide Map</Text>
</TouchableOpacity>
</View>
);
}
renderMap() {
if (this.state.showMap) {
return (
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
cacheEnabled={true}
onRegionChangeComplete={this.onRegionChangeComplete.bind(this)}
>
</MapView>
);
} else {
return <View style={styles.map}/>;
}
}
onButtonPress() {
this.setState({
showMap: !this.state.showMap,
})
}
onRegionChangeComplete(region) {
console.log("new region", region)
}
我试着说出正确和错误,但没有帮助。如果你有任何建议,请告诉我。提前谢谢你 当您第一次加载页面时,它将调用initialRegion;当您隐藏显示地图时,它将不会再次调用initialRegion函数,因为之前已经加载了地图,所以您需要在hide/show方法上调用函数,并通过以下方法设置initialRegion
this.map.setNativeProps({ region });
或
您需要将addref={ref=>{this.map=ref;}}}作为如下内容,以便在函数中使用this.map作为引用
<MapView
ref={ref => { this.map = ref; } }
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
onRegionChangeComplete={(region) => { **somefuncation** } }
>
this.map.animateToRegion({
latitude: this.props.latitude,
longitude: this.props.longitude,
longitudeDelta: LONGITUDE_DELTA ,
latitudeDelta: LATITUDE_DELTA
}, 1)}
<MapView
ref={ref => { this.map = ref; } }
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
onRegionChangeComplete={(region) => { **somefuncation** } }
>