Question

对于iOS和Android，我都有与Google一起运行的react-native地图。有没有办法在react-native expo应用中启用类似于Google Maps应用的mapType图层切换器？这样用户可以切换mapTypes（标准，卫星等）

作为代码的简化版本。

\renewcommand{\figurename}{Figur}

在状态 switchMapType（）

内时出现未定义的错误

Answer 1

查看文档，就像将正确的样式传递给mapType道具一样简单

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

要显示的地图类型。

standard：标准路线图（默认）
没有：没有地图
卫星：卫星视图
混合型：覆盖道路和兴趣点的卫星视图
地形：（仅适用于Android）地形视图
mutedStandard：更细微，使标记/线条弹出更多（仅适用于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中的swtich maptype

1 个答案:

绑定功能

设置状态