В настоящее время почти все мобильные приложения имеют функцию карт. Мне пришлось интегрировать Google Maps в мое приложение React Native, и единственным выбором была react-native-maps от Airbnb (это единственное приложение, которое все еще поддерживается сообществом React Native).
Я нашел несколько руководств по настройке этой библиотеки, но ни один из них не работал у меня полностью. Это произошло потому, что мне пришлось работать на платформах iOS и Android, а также поддерживать Google Maps для iOS.
Давайте создадим приложение React Native с нуля с помощью response-native-cli, чтобы шаг за шагом показать, как все установлено. Если вы хотите интегрировать react-native-maps в существующее приложение, пропустите шаг 1.
Шаг 1. Установите и настройте приложение React Native.
Если вы не установили интерфейс командной строки React Native, запустите: npm install -g react-native-cli. Теперь вы можете создать свой проект, просто используя: react-native init ReactNativeMaps
Вот версии зависимостей на момент сборки этого проекта:
- «Реагировать»: «16.6.1»
- «React-native»: «0,57,5»
- «React-native-maps»: «0.22.1» - мы установим его позже.
Теперь вы можете попробовать запустить свое приложение react-native run-ios или react-native run-android. Обычно это работает без проблем.
Шаг 2. Добавьте и свяжите пакет response-native-maps
Теперь давайте установим response-native-map: 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<Props> {
render() {
return (
<MapView
style={{flex: 1}}
region={{
latitude: 42.882004,
longitude: 74.582748,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
showsUserLocation={true}
/>
);
}
}
Вы можете протестировать любое местоположение, которое захотите, просто укажите соответствующие широту и долготу. Как видите, я включил определение местоположения пользователя, просто добавив опору showUserLocation в компонент MapView. Если вы работаете на реальном устройстве, вы увидите свое текущее местоположение.
Итак, как видите, по умолчанию Apple Maps уже работает. Более того, если вы все правильно связали и включили местоположение пользователя, на самом деле он многое сделал для нас (разрешение пользователя для местоположения с сообщением по умолчанию). Если вы пришли из нативной разработки для iOS, то, вероятно, знаете, что такое файл info.plist.
Шаг 4. Установите Cocoapods и пакет GoogleMaps (iOS)
Карты Apple были легкими, не так ли? Согласны - давайте посмотрим, что для нас есть в Google Картах. Нам необходимо установить SDK Google Maps для iOS. Мы будем использовать Cocoapods. Если вы не использовали его раньше, запустите sudo gem install cocoapods.
Теперь вам нужно создать Podfile, в котором вы укажете зависимости вашего приложения 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=1Preprocessor в настройки сборки
Шаг 5. Получите ключ API Google Maps, запустите приложение iOS с Google Maps.
Итак, теперь нам нужно сгенерировать ключ API Карт Google.
Скопируйте свой ключ API и добавьте в файл AppDelegate.m.
#import <GoogleMaps/GoogleMaps.h>
[GMSServices provideAPIKey:@"YOUR_API_KEY"]
Теперь вы можете сообщить компоненту MapView, что готовы к использованию Google Maps.
Да, пожалуйста, запустите приложение для iOS. И вы получите Google Maps.
Я надеюсь.
Шаг 6. Давайте попробуем Android прямо сейчас
Хорошо, теперь мы можем выйти из xCode и попробовать react-native run-android. Если вы получаете то же самое:
проверьте файл android / app / build.gradle. И замените это:
compile project(':react-native-maps') с этим:
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'
Да, и не забудьте добавить API_KEY в файл AndroidManifest.xml.
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY"/>
</application>
Да, теперь ваше приложение работает на обеих платформах. Пожалуйста, проверьте репозиторий react-native-maps, чтобы узнать о других интересных вещах, которые вы можете делать с помощью компонента MapView.
Заключение
Надеюсь, моя первая статья на Medium была для вас полезной. Пожалуйста, если вы заметили какие-либо ошибки, не стесняйтесь оставлять комментарии, я буду признателен за ваши комментарии!
