我有针对 IOS 和 Android 的谷歌运行的 react-native map 。
有没有办法在 react-native expo 应用程序中启用像谷歌地图应用程序那样的 mapType
层切换器?这样用户就可以切换 map 类型(标准、卫星……)
代码的简化版本
constructor(props) {
super(props);
this.state = {
mapRegion: null,
markers: [],
mapType: null
};
}
switchMapType() {
console.log('Changing');
this.state.mapType = 'satellite'
}
render() {
return (
<MapView
provider="google"
mapType={this.state.mapType}
>
<Icon
onPress={this.switchMapType}
/>
</MapView>
);
}
我在 state switchMapType()
中遇到未定义的错误。
最佳答案
查看文档,它可以像将正确的样式传递给 mapType
prop 一样简单
https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md
要显示的 map 类型。
- 标准:标准路线图(默认)
- none:没有 map
- 卫星:卫星 View
- 混合:叠加道路和兴趣点的卫星 View
- 地形:(仅限 Android)地形 View
- mutedStandard:更微妙,使标记/线条更突出(仅限 iOS 11.0+)
绑定(bind)你的函数
您收到该错误是因为可能需要绑定(bind)您的函数,以便它知道要使用的 this
的值。您可以通过将以下内容放入构造函数中来在构造函数中执行此操作
constructor(props) {
...
this.switchMapType = this.switchMapType.bind(this);
...
}
或者您可以将 switchMapType
的声明更改为
switchMapType = () => {
...
}
或者你可以在调用函数时绑定(bind)它
<Icon
onPress={this.switchMapType.bind(this}
/>
详情可以看这篇文章https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
我更喜欢自己使用箭头函数。
设置状态
我还注意到您的函数 switchMapType
中设置状态的方式存在错误。您正在调用 this.state.mapType = 'satellite'
您应该不像这样操纵状态。像这样改变状态不会强制重新渲染(这是你想要的)并且它会导致意想不到的后果。有关设置状态的更多信息,请参阅本文 https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b
如果你想改变状态你应该使用this.setState({ key1: value1, key2, value2 });
因此,如果您将 switchMapType
函数更新为以下内容,它应该可以工作
switchMapType = () => {
console.log('changing');
this.setState({ mapType: 'satellite' });
}
如果您希望能够在satellite
和standard
版本之间切换,您可以这样做。这使用三元语句来处理 if/else
https://codeburst.io/javascript-the-conditional-ternary-operator-explained-cac7218beeff
switchMapType = () => {
console.log('changing');
this.setState({ mapType: this.state.mapType === 'satellite' ? 'standard' : 'satellite' });
}
关于android - 在 react-native-map 中切换 maptype,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54164642/