Установка React-Native-Mapbox-навигация в iOS

Автор оригинала: Osledy Bazó.

На протяжении многих лет мы исследуем способ иметь способность Google находятся в реактивном родном. Прямо сейчас этот пакет существует благодаря https://www.homee.com/Команда.

Вы можете найти пакет по адресу https://github.com/homeeendemand/reaCt-native-mapbox-navigation

К сожалению, у меня было много проблем с установкой этого пакета, столкнулась с множеством ошибок и хотела дать пошаговую учебную интеграцию.

Создать реактивное приложение

React-Noated init Mapboxnavigation

Проверьте все работает

К сожалению, флиппер производит много ошибок для меня на iOS, как:

> cd MapboxNavigation
> react-native run-ios
...
...
The following build commands failed:
  CompileC /Users/os/Library/Developer/Xcode/DerivedData/MapboxNavigation-fihdhqqvpzufydfwkiousnssilfq/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper.build/Objects-normal/x86_64/FlipperRSocketResponder.o /Users/os/Desktop/Bouncing/MapboxNavigation/ios/Pods/Flipper/xplat/Flipper/FlipperRSocketResponder.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Откройте файл «Podfile» и замените use_flipper! к use_flipper! ({'Flipper-Folly' => '2.3.0'}) Затем удалите «Podfile.lock», а затем запустите POD Установка

> react-native run-ios
...
Build Succeeded

Наше приложение работает сейчас

Установить React-Native-Mapbox-навигацию

Давайте добавим пакет React-National-mapbox-навигацию на наш проект.

пряжа Добавить @ Homee/React – Nature-Mapbox-навигация

У вас есть секретный и публичный токен Mapbox под рукой. Вы можете генерировать те здесь:

Ваш токен общественного доступа : От вашей учетной записи Страница токенов , вы можете либо скопировать ваш/по умолчанию публичный токен/или щелкнуть Создать токен Кнопка для создания нового публичного токена.
Секретный токен доступа с Загрузки: читать Область Отказ

Из вашей учетной записи Страница токенов нажмите Создать токен кнопка.
С страницы создания токена дайте своему токену имя и убедитесь, что коробка рядом с загрузками: проверяется чтение.
Нажмите на Создать токен Кнопка внизу страницы, чтобы создать токен.
Токен, который вы создали, – это секретный токен/, что означает, что у вас будет только одна возможность скопировать его где-то безопасно.

Теперь после их документации и до того, как вы сделаете POD Установить Давайте сначала сделаем некоторые предыдущие и необходимые шаги.

Создайте файл ‘.NETRC’ в домашней папке вашего компьютера (не в папке проекта) Touch ~/.Netrc И откройте файл с вашим редактором код ~/.netrc Добавьте следующее в файл

machine api.mapbox.com
login mapbox
password YOUR_SECRET_ACCESS_TOKEN

Откройте свой проект «mapboxnavigation.xcworkspace» в Xcode Теперь, как мы используем Native SDK Mapbox под капотом, нам нужно иметь задержку мозга объекта-C для Swift, в противном случае пакет не будет работать.

Для этого: * От xcode, выберите файл «AppDeLeguet.M» и щелкните правой кнопкой мыши. * Выберите новый файл … * Выберите Swift File. * Назовите свой файл манекен или все, что вы хотите, я назвал его «MapBoxDirection». * В раскрывании группы убедитесь, что выберите папку групп для вашего приложения, а не сам проект. * После того, как вы создаете файл SWIFT, вам следует предлагать выбрать, если вы хотите настроить кнопочный заголовок объекта-C. Выберите «Создать мозговой заголовок». Вот AGIF для этих шагов.

Поместите свой публичный токен в «INFO INFO.PLIST» и и добавить ключ «MGLMapboxaccessToken», значение которого является вашим токеном публичного доступа.

MGLMapboxAccessToken
YOUR_PUBLIC_ACCESS_TOKEN

Теперь мы можем запустить POD Установить из папки iOS CD iOS; POD Установка

Вы увидите все дополнительные пакеты установлены.

Installing Mapbox-iOS-SDK (6.3.0)
Installing MapboxAccounts (2.3.1)
Installing MapboxCommon (9.2.0)
Installing MapboxCoreNavigation (1.2.1)
Installing MapboxDirections (1.2.0)
Installing MapboxMobileEvents (0.10.8)
Installing MapboxNavigation (1.2.1)
Installing MapboxNavigationNative (30.0.0)
Installing MapboxSpeech (1.0.0)
Installing Polyline (5.0.2)
Installing Solar (2.1.0)
Installing Turf (1.2.0)
Installing react-native-mapbox-navigation (1.0.0)

Проверьте все работает

Давайте проверим, работает ли все.

> react-native run-ios
...
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening MapboxNavigation.xcworkspace. Run CLI with --verbose flag for more details.
...
Build system information
error: Multiple commands produce '/Users/os/Library/Developer/Xcode/DerivedData/MapboxNavigation-fihdhqqvpzufydfwkiousnssilfq/Build/Products/Debug-iphonesimulator/MapboxNavigation.app/Assets.car':
1) Target 'MapboxNavigation' (project 'MapboxNavigation') has compile command with input '/Users/os/Desktop/Bouncing/MapboxNavigation/ios/MapboxNavigation/Images.xcassets'
2) That command depends on command in Target 'MapboxNavigation' (project 'MapboxNavigation'): script phase "[CP] Copy Pods Resources"

Хорошо, руководство по интеграции рассказывает что-то об этом. Нам нужно добавить какой-код в верхней части «Podfile»:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '10.0'
install! 'cocoapods', :disable_input_output_paths => true

...

В Terminal Execute: CD iOS; Обновление POD; POD Установка

Давайте попробуем снова запустить приложение:

> react-native run-ios
...
▸ Build Succeeded
success Successfully built the app
error Failed to get the target build directory. Run CLI with --verbose flag for more details.

Ухамлия

> react-native run-ios --verbose
...
▸ Build Succeeded
success Successfully built the app
error Failed to get the target build directory.

Не уверены, что происходит, поэтому я выбираю для запуска проекта в Xcode, чтобы увидеть, есть ли какая-либо другая подсказка, почему он не может.

На Xcode Product -> построить

*Showing Recent Messages*
Signing for "MapboxNavigation" requires a development team. Select a development team in the Signing & Capabilities editor.

UHM OK OK, давайте выберем команду разработки для этого проекта, убедитесь, что вы сделаете это на всех ваших целях.

Опять же, на продукте Xcode -> построить

Undefined symbols for architecture arm64:
  "_swift_getFunctionReplacement", referenced from:
      _swift_getFunctionReplacement50 in libswiftCompatibilityDynamicReplacements.a(DynamicReplaceable.cpp.o)
     (maybe you meant: _swift_getFunctionReplacement50)
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

ОК, новая ошибка, я искал в проблемах React-Nature-Mapbox-навигации и нашел так много шагов:

Перейти к проекту> Настройки сборки> Путь поиска библиотеки
Удалить ” ( t o o l c h a i n d я r ) / u s r / l i b / s w i f t – 5 . 0 / (Toolchain_dir)/usr/lib/swift-5.0/ ( t o o l c h a i n D Я r ) / u s r / l i b / s w Я F T – 5 . 0 / (platform_name) “
Установите «Не мертвые индикаторы и термины», чтобы «да» для обоих проектов, так и все цели

Установите «Всегда вставлять SWIFT стандартные библиотеки» на «Да» в проекте «Настройки сборки» и всех целей.

Далее, на продукте Xcode -> построить

Похоже, эта сборка делает успех, поэтому давайте запустим проект в симуляторе https://share.getcloudapp.com/wbu9lkwq.

Это не удалось с этой ошибкой:

dyld: Library not loaded: @rpath/MapboxMobileEvents.framework/MapboxMobileEvents
  Referenced from: /Users/os/Library/Developer/CoreSimulator/Devices/F4BE899E-D625-45DE-9708-649C8263A45A/data/Containers/Bundle/Application/717BD298-BB7F-4AFB-8FA9-8000D3611B4F/MapboxNavigation.app/Frameworks/Mapbox.framework/Mapbox
  Reason: image not found

Для этого нам нужно добавить use_frameworks! к «подфилю». К сожалению, Flipper можно использовать с «use_framweorks», поэтому я должен был отключить его

...
install! 'cocoapods', :disable_input_output_paths => true
use_frameworks!
...
# Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and you should disable these next few lines.
  # use_flipper!({ 'Flipper-Folly' => '2.3.0' })
  # post_install do |installer|
  #  flipper_post_install(installer)
  # end
...

CD iOS; Обновление POD; POD Установка

Removing CocoaAsyncSocket
Removing CocoaLibEvent
Removing Flipper
Removing Flipper-DoubleConversion
Removing Flipper-Folly
Removing Flipper-Glog
Removing Flipper-PeerTalk
Removing Flipper-RSocket
Removing FlipperKit
Removing OpenSSL-Universal
Removing YogaKit

Далее, на продукте Xcode -> построить

Undefined symbols for architecture x86_64:
  "_OBJC_CLASS_$_RCTViewManager", referenced from:
      type metadata for react_native_mapbox_navigation.MapboxNavigationManager in MapboxNavigationManager-00758322f339d0e6dfca28eea53c318c2d7d6f5559454e4f45ca706c8ab22e30.o
  "_OBJC_METACLASS_$_RCTViewManager", referenced from:
      _OBJC_METACLASS_$_MapboxNavigationManager in MapboxNavigationManager-00758322f339d0e6dfca28eea53c318c2d7d6f5559454e4f45ca706c8ab22e30.o
  "_RCTRegisterModule", referenced from:
      _initialize_MapboxNavigationManager in MapboxNavigationManager-00758322f339d0e6dfca28eea53c318c9998a9e17a6bf7596501d341d52f1444.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Другая ошибка, неопределенные символы для архитектуры x86_64 * Выберите проект POD * В целях Выберите Фазу MapBoxNavigation * Выберите Фаза сборки в верхней части * Выберите Бинарную ссылку с библиотеками * Нажмите + * Поиск “Mapbobbileeeeeeeeeeeeeeeeeeeeeeeeeeeeereeeewents.framework” * Нажмите Добавить * Clean * Rebuild

Далее на Xcode Product -> Создать это все еще получило мне ошибку, поэтому мне пришлось:

* Clear Xcode Cache
`rm -rf ~/Library/Developer/Xcode/DerivedData`
* Go into iOS folder
`cd iOS`
* Clear CocoaPods Cache
`pod deintegrate && pod cache clean —all`
* Re-Install Pods
`pod install`

Далее, на продукте Xcode -> Создайте приложение, наконец, побежали

Интегрируйте реагировать-нативно-mapbox-навигацию

Давайте изменим наш файл «app.js» на базу для реактивной навигации-навигации

import * as React from 'react';
import {StyleSheet, View} from 'react-native';
import MapboxNavigation from '@homee/react-native-mapbox-navigation';

const App = () => {
  return (
    
       {
          const {latitude, longitude} = event.nativeEvent;
        }}
        onRouteProgressChange={(event) => {
          const {
            distanceTraveled,
            durationRemaining,
            fractionTraveled,
            distanceRemaining,
          } = event.nativeEvent;
        }}
        onError={(event) => {
          const {message} = event.nativeEvent;
        }}
        onCancelNavigation={() => {
          // User tapped the "X" cancel button in the nav UI
          // or canceled via the OS system tray on android.
          // Do whatever you need to here.
        }}
        onArrive={() => {
          // Called when you arrive at the destination.
        }}
      />
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Запустите приложение сейчас.

Приложение останавливается и в Xcode Get есть эта ошибка:

Assertion failed: This application's Info.plist file must include "audio" in UIBackgroundModes. This background mode is used for spoken instructions while the application is in the background.: file

Нам нужно добавить аудио в фоновом режиме для этого на работу Добавить в свою info.plist * Необходимые фоновые режимы * Пункт 0: AUDIO

Запустите приложение снова. И, наконец, у нас есть приложение работает https://share.getcloudapp.com/p8ukxrpe.

Найдите код для этого руководства на нашем счете GitLab https://gitlab.com/alamedadev/mapboxnavigation.

Создать реактивное приложение

Проверьте все работает

Установить React-Native-Mapbox-навигацию

Проверьте все работает

Интегрируйте реагировать-нативно-mapbox-навигацию

Читайте ещё по теме: