지도 및 Geolocation 기능 통합 React Native 앱

회사연혁

Expo 관리 프로젝트의 경우, expo-location는 허가, 위치 추적 및 상자를 지칭하는 간소화 된 API를 제공합니다. 개발 프로세스를 단순화하고, 기본 코드 사용자 정의에 대한 제한 액세스는 딥 플랫폼 통합이 필요하지 않은 프로토 타입 또는 응용 프로그램에 대한 제한.

다른 주목할만한 Libraries

• react-native-google-places: 구글 플레이스 API에서 자동 완성 및 장소 세부 정보를 제공합니다.
• react-native-mapbox-gl: 사용자 정의 맵 스타일과 오프라인 타일을 제공 (무 적극적으로 유지).
• react-native-maps-super-cluster]: react-native-maps에 효율적인 마커 클러스터링을 추가합니다.

자세한 비교를 위해서는 ]react-native-maps 및 react-native-geolocation-service의 공식 문서를 참조하세요.

앱에서 지도 구현

설치 및 설치

라이브러리 및 구성 플랫폼 별 의존성을 설치하여 시작하십시오.

npm install react-native-maps
cd ios && pod install

Android에서 Google지도를 사용하는 경우 API 키를 에 추가하십시오.

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

Google지도와 iOS의 경우, ] 또는 ]와 같은 키를 추가합니다. 또는 Apple Maps는 API 키 없이 상자에서 작동합니다.

기본 맵 구성

핵심 구성 요소는 ]이며, 이는 ] prop을 허용하여 초기 눈에 보이는 영역을 정의합니다.

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

와 ]은 줌 레벨을 제어합니다. 더 큰 값은 더 넓은 영역을 보여줍니다.

Markers 및 Callouts 추가

지도에 Markers 핀 포인트 위치. 그들은 탭 할 때 호출로 표시된 제목과 설명을 포함 할 수 있습니다:

import MapView, { Marker, Callout } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

사용자 정의 Markers 및 클러스터링

prop을 사용하여 사용자 정의보기로 기본 마커 핀을 대체 :

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

수백 수천 명의 마커가 장착되면 클러스터링을 사용하여 성능을 향상시킵니다. ] 핸들 그룹화 및 줌 레벨 관리와 같은 라이브러리를 자동으로 처리합니다.

그림 모양: 다각형과 다각형

경로 또는 경계를 위해, 사용 및 구성 요소:

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

지도보기

프로그래밍은 또는 를 사용하여 카메라를 이동:

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

오시는 길

react-native-geolocation-service 설치

npm install react-native-geolocation-service
cd ios && pod install

라이브러리는 두 플랫폼에서 권한 설정을 요구합니다. Android 6+의 경우 ] 또는 ]와 같은 전용 라이브러리를 사용하여 실행 시간 권한을 요청하십시오. iOS에서는 또는 ] 키가 포함되어 있습니다. ].

단일 위치 얻기

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

연속 위치 추적

실시간 이동 (예: 피트니스 추적), 사용 :

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

배경 위치

배경(예: 납품 추적)에서 위치 업데이트가 필요한 앱을 위해, 추가 단계가 필요합니다:

• iOS: ]Background Mode]] 기능 및 확인 “Location update”. 사용 배터리 친화적 인 업데이트에 대 한.
• Android:] 은 각기 다른 알림을 가진 전경 서비스를 사용합니다. 라이브러리 ] 는 ] 와 ] 의 유틸리티를 제공합니다.

항상 적절한 을 얻은 권한은 배경 추적을 가능하게하기 전에, 사용자가 분명히 앱 스토어 가이드라인에 따르도록 알려줍니다.

가장 좋은 연습을 처리하는 권한

사용자가 필요한 이유를 위해 상황에 따라 요청을 호출합니다. ]과 같은 라이브러리를 사용하여 크로스 플랫폼 권한을 관리하십시오.

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

핸들 denial gracefully-e.g., 왜 위치가 필요한지 설명하고 시스템 설정에 사용자를 안내하는 경고를 보여줍니다.

오류 처리 및 Edge 케이스

• 출발:폴더는 기본 영역으로 돌아가거나 설정에서 위치를 활성화하기 위해 사용자를 프롬프트합니다.
• 위치 사용 불가: GPS 신호가 실내를 잃을 때, 사용 캐시 된 데이터를 허용. "Locating..." 표시 표시.
• Network errors: Map로드는 인터넷이 없는 경우 실패할 수 있습니다. 위주 또는 오프라인 메시지 렌더링.
• Timeouts: 합리적인 ](예: 15초)를 설정하고 사용자를 알려줍니다.

성능 최적화

비정상적인 렌더링 감소

• ]와 ] 모든 상태 변경에 재 렌더링을 방지하는 객체를 제거.
• ] 사용자 정의 마커와 같은 어린이 구성품에 사용됩니다.
• Throttle 또는 debounce 위치 업데이트 콜백.

Limit Map 업데이트

• ]를 사용하여 사용자가 최소 거리를 이동할 때만 업데이트합니다.
• 마크러 데이터를 보존함으로써 전체지도를 렌더링하지 마십시오 ] 마커 설정이 변경되지 않을 때.

Clustering 관리

많은 마커를 표시할 때 클러스터링 또는 로드를 사용할 수 있습니다. ]를 사용하여 현재 뷰포트에서 볼 수 있습니다.

플랫폼-Specific 고려

iOS 앱

• Apple Maps는 API 키가 필요하지만, 3D 건물과 실내 탐색과 같은 Google Maps 기능을 부족합니다.
• iOS의 Google지도에 대한, 당신은 ]에 API 키를 추가하고 Google지도 SDK를 연결해야합니다.
• 로컬라이제이션을 위한 를 설정하는 것을 기억하십시오.

의 안드로이드

• Google Maps는 유효 API 키가 나타날 필요가 있습니다. Google Cloud Console에서 확인하고 Android용 "Maps SDK"를 활성화하십시오.
• 특정 장치에서, 모의 위치는 검출하기 위하여 ]를 방해할 수 있습니다.
• 배경 위치에 대한 전경 서비스를 사용합니다. 앱은 살아 남기기 위해 알림을 표시해야합니다.

시험 위치 특징

• 지도와 모조 위치를 테스트하는 시뮬레이터를 사용합니다. Xcode에서, "위치를 수정"을 활성화하여 좌표를 설정할 수 있습니다.
• Android Studio의 경우 GPS 데이터를 보내려면 "Extended Controls"를 사용하십시오.
• GPS 정확도, 권한 대화, 배경 추적 동작을 확인하는 실제 장치에 대한 테스트.
• ] 또는 ]과 같은 도구로 권한 논리 및 UI 테스트를 작성하십시오.

외부 자료

• react-native-maps GitHub 저장소
• react-native-geolocation-service GitHub 저장소
• Google Maps 플랫폼 문서
• Apple MapKit 문서

관련 기사

React Native 앱의지도와 위치 통합은 동적 위치 인식 경험으로 정적 인터페이스를 변환합니다. react-native-maps 및 react-native-geolocation-service와 같은 강력한 라이브러리를 활용하여 개발자는 기능적인지도, 실시간 사용자 추적 및 원활한 권한 처리 기능을 추가할 수 있습니다. 플랫폼 차이, 성능 최적화 및 사용자 개인 정보 보호에 대한 관심은 광택, 신뢰할 수 있는 응용 프로그램을 보장합니다. 패턴과 모범 사례를 통해 사용자는 이 기능을 통해 사용자의 편의성을 갖추게 됩니다.