Як інтегрувати карти в React Native за допомогою реакційних-рідних карт

На сьогоднішній день майже всі мобільні програми мають функцію карт. Мені довелося інтегрувати Google Maps до мого додатку React Native, і єдиним вибором були реактивні карти від Airbnb (це єдине, яке все ще підтримується спільнотою React Native).

Я знайшов кілька підручників з налаштування цієї бібліотеки, але жоден з них не працював повністю для мене. Це було тому, що мені довелося працювати на платформах iOS та Android, а також підтримувати Google Maps для iOS.

Давайте створимо React Native додаток з нуля, використовуючи response-native-cli, щоб покроково показати, як все встановлено. Якщо ви хочете інтегрувати реактивні карти для існуючого додатка, пропустіть крок 1 .

Крок 1: Встановіть та налаштуйте додаток React Native

Якщо ви ще не встановлені Реагувати Native інтерфейсу командного рядка, виконайте наступну команду: npm install -g react-native-cli. Тепер ви можете створити свій проект, просто використовуючи:react-native init ReactNativeMaps

Ось версії залежностей на момент побудови цього проекту:

  • “Реагувати”: “16.6.1”
  • “Response-native”: “0.57.5”
  • “Response-native-maps”: “0.22.1” - ми встановимо цю пізніше.

Тепер ви можете спробувати запустити свій додаток, react-native run-iosабо react-native run-android. Зазвичай це працює без проблем.

Крок 2: Додайте та зв’яжіть пакет response-native-maps

Тепер давайте встановимо реагувати рідну-карта: npm install --save react-native-mapsпісля установки пакета ви повинні зв'язати його з вашими рідними додатками: react-native link react-native-maps.

Крок 3: Налаштування Apple Maps (iOS)

Це буде простіше, якщо ми налаштуємо їх окремо за платформою, тож давайте спочатку зробимо це на iOS. Перш ніж інтегрувати Google Maps, ми перевіримо, чи правильно працює Apple Maps. Додайте наступний код до поточного компонента візуалізації, де ви хочете відтворити MapView.

import MapView from 'react-native-maps'
export default class App extends Component { render() { return (  ); }}

Ви можете протестувати будь-яке місце, яке хочете, просто вкажіть відповідні широту та довготу. Як бачите, я ввімкнув розташування користувачів, просто додавши showUserLocationпроп до компоненту MapView. Якщо ви працюєте на реальному пристрої, ви побачите своє поточне місцезнаходження.

Отже, як бачите, за замовчуванням Apple Maps вже працює. Більше того, якщо ви правильно зв’язали все і ввімкнули розташування користувача, це насправді зробило для нас багато чого (дозвіл користувача на місце з повідомленням за замовчуванням). Якщо ви походили з власної розробки iOS, то ви, мабуть, знаєте, що таке файл info.plist.

Крок 4: Встановіть Cocoapods та пакет "GoogleMaps" (iOS)

Карти Apple було просто, так? Погодились - тож давайте подивимось, що для нас мають Карти Google. Ми повинні встановити Google Maps SDK для iOS. Ми будемо використовувати Cocoapods. Якщо ви раніше цим не користувались, біжіть sudo gem install cocoapods.

Тепер вам потрібно створити підфайл, де ви вкажете залежності вашого додатка iOS. Перейдіть до вашої iOS / папки у вашому додатку React Native і запустіть: pod initабо ви можете використовувати, у touch Podfileвас має бути щось подібне до цього:

# platform :ios, '9.0'
target 'ReactNativeMaps' do
# Pods for ReactNativeMaps
pod 'GoogleMaps'
end

Як бачите, я додав модуль GoogleMaps, і тепер ми повинні його встановити. Якщо ви все ще на IOS / папку, запустіть: pod install. Якщо ви спробуєте запустити його зараз, ви, ймовірно, отримаєте повідомлення про помилку:

Гаразд, давайте робити те, що він хоче. Тепер нам слід відкрити робочу область xCode.

Перейдіть до папки AirGoogleMaps з node_modules /

І перетягніть його у верхню частину вашого проекту xCode

Будь ласка, спробуйте створити свій проект xCode, якщо у вас не виходить

Вам слід додати HAVE_GOOGLE_MAPS=1макрос Preprocessor для налаштування збірки

Крок 5: Отримайте ключ API Карт Google, запустіть додаток iOS на Картах Google

Отже, тепер ми повинні створити ключ API Google Maps .

Скопіюйте свій ключ API і додайте до файлу AppDelegate.m.

#import .h>

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

Original text


Now you can tell your MapView component that you are ready to use Google Maps.

Oh yesss, please run your iOS app. And you will get Google Maps.

I hope.

Step 6: Let’s try Android now

Okay now we can quit xCode and let’s just try react-native run-android. If you are getting the same as this:

check your android/app/build.gradle file. And replace this:

compile project(':react-native-maps') with this:

implementation(project(':react-native-maps')){ exclude group: 'com.google.android.gms', module: 'play-services-base' exclude group: 'com.google.android.gms', module: 'play-services-maps' }implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

Oh, and don’t forget to add API_KEY to AndroidManifest.xml file.

Yes, now your app is running on both platforms. Please check the react-native-maps repo for more fun things that you can do with your MapView component.

Conclusion

Hope my first article on Medium was helpful for you. Please, if you see any mistakes don’t hesitate to leave a comment, I will appreciate your comments!