переключить тип карты в response-native-map - PullRequest
Новая
       6

переключить тип карты в response-native-map

0 голосов
/ 13 января 2019

У меня работает карта-реакция с Google для IOS и Android. Есть ли способ включить переключатель слоя mapType, например, в приложении Google Maps, в приложении своей собственной реакции? Так что пользователь может переключать mapTypes (стандартный, спутниковый, ....)

упрощенная версия кода 

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

Я получаю неопределенную ошибку, когда внутри состояние switchMapType().

1 Ответ

0 голосов
/ 13 января 2019

Глядя на документацию, это может быть так же просто, как передать правильный стиль в mapType prop

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

Тип отображаемой карты.

  • стандарт: стандартная дорожная карта (по умолчанию)
  • нет: нет карты
  • спутник: вид со спутника
  • гибрид: вид со спутника с наложением дорог и достопримечательностей
  • ландшафт: (только для 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' });
}
...