React Native Mapbox(v10) 설치

소개

이 글에서는 React Native에서 지도를 통합하기 위한 도구로 Mapbox(v10)를 사용하는 기본 사항에 대해 알아봅니다. Google Maps는 아마도 가장 유명한 매핑 시스템일 것이지만 RNMapBox는 성능면에서 가장 우수하고 부드럽습니다. 나는 iOS와 Android 모두에서 완벽하게 작동하는 mapbox를 선호합니다.

시작하자

Mapbox를 사용하려면 여기에서 계정을 등록해야 합니다. "무료로 매핑 시작"버튼을 클릭하면 가입 페이지로 이동합니다. 그러나 이미 계정이 있는 경우 사용자 이름이나 이메일로 로그인할 수 있습니다.

로그인한 후 계속 진행해야 하는 개인 키를 만듭니다. 아래 그림을 참조하십시오.

Make a private key and also make sure to enable DOWNLOADS:READ.

설치:

1단계 - 패키지 설치:
실 사용
git에서 최신 소스를 설치합니다.yarn add rnmapbox/maps#main
npm 사용
git에서 최신 소스를 설치합니다.npm install --save rnmapbox/maps#main
2단계 - 설치 가이드 - iOS:
다음은 모든 다음 설정에 필요합니다.

podfile의 시작 부분에 다음을 추가하십시오.

$RNMapboxMapsImpl = 'mapbox'

ios/Podfile에 also를 추가합니다.

  pre_install do |installer|
    $RNMapboxMaps.pre_install(installer)
    ... other pre install hooks
  end
  post_install do |installer|
    $RNMapboxMaps.post_install(installer)
    ... other post install hooks
  end

그런 다음 시스템에서 이 구성을 수행합니다.



마지막으로 pod install을 실행하여 적절한 mapbox 종속성을 다운로드합니다.cd ios && pod install
iOS 구성 완료


3단계 - 설치 가이드 - Android:
RNMapboxMapsImpl = "mapbox"를 Gradle 파일에 추가하십시오. 자세한 내용은 아래를 참조하십시오.

RNMapboxMapsImpl을 v10으로 설정

android/build.gradle에서

buildscript {
    ext {
        // ...
        RNMapboxMapsImpl = "mapbox" // required for v10
        minSdkVersion = 21 // must be 21 or greater
        compileSdkVersion = 31 //should atleast me 31
    }
}

allprojects {
    repositories {
        // ...other repos
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = 'mapbox'
                // Use the secret token you stored in gradle.properties as the password
                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
            }
        }
        // ...even more repos?
    }
}

android/app/build.gradle에서

dependencies {
     // ...
    implementation 'com.mapbox.maps:android:10.8.1'
     // ...
}

비밀 토큰 구성
비밀 토큰 노출을 방지하려면 환경 변수로 추가하십시오.

Gradle 사용자 홈 폴더에서 gradle.properties 파일을 찾거나 생성합니다. 폴더는 «USER_HOME»/.gradle에서 찾을 수 있습니다. 파일을 찾거나 만든 후에는 경로가 «USER_HOME»/.gradle/gradle.properties여야 합니다. 공식 Gradle 문서에서 Gradle 속성에 대해 자세히 알아볼 수 있습니다.
비밀 토큰을 gradle.properties 파일에 추가합니다.
MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN
단계:
홈 -> Command+Shift+.를 사용하여 숨김 파일 표시 -> 터미널에서 .gradle 폴더 열기 -> touch gradle.properties로 이동한 다음 Enter 키를 누르면 파일이 생성됩니다 -> 파일 열기 및 gradle.properties 파일에 비밀 토큰 추가:MAPBOX_DOWNLOADS_TOKEN=YOUR_SECRET_MAPBOX_ACCESS_TOKEN

마지막으로 프로젝트를 동기화하고 앱을 실행합니다.

안드로이드 구성 완료