在 react-native-map 中切换 maptype

Question

我有 IOS 和 Android 的 react-native 映射运行 google。有没有办法让 mapType 图层切换器像 google 地图应用程序那样在 react-native expo 应用程序中启用？这样用户就可以切换地图类型（标准、卫星……）

简化版代码

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().

中得到一个未定义的错误

Answer 1

查看文档可以很简单，只需将正确的样式传递给 mapType prop

https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md

要显示的地图类型。

标准：标准路线图（默认）
none: 没有地图
卫星：卫星视图
混合：覆盖道路和兴趣点的卫星视图
地形：（仅Android）地形视图
mutedStandard：更微妙，使 markers/lines 更流行（仅 iOS 11.0+）

绑定你的功能

您收到该错误是因为可能需要绑定您的函数，以便它知道要使用的 this 的值。您可以通过将以下内容放入构造函数中来在构造函数中完成此操作

constructor(props) {
  ...
  this.switchMapType = this.switchMapType.bind(this);    
  ...
}

或者您可以将 switchMapType 的声明更改为

以将其转换为箭头函数

switchMapType = () => {
  ...
}

或者您可以在调用函数时绑定函数

<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' });
}

在 react-native-map 中切换 maptype

switch maptype in react-native-map

android

ios

react-native

react-native-maps

绑定你的功能

设置状态