Colin's Blog
[react] 리액트 네이티브로 지도 표시하기

리액트 네이티브를 사용하여 지도를 표시하고 상호작용할 수 있는 애플리케이션을 만들 수 있습니다. 이를 위해 react-native-maps 라이브러리를 활용하여 지도를 표시하고 필요한 기능을 추가할 수 있습니다.

1. 리액트 네이티브 프로젝트 생성

먼저, 리액트 네이티브 프로젝트를 생성합니다.

npx react-native init MapApp

2. 필요한 패키지 설치

리액트 네이티브 지도를 사용하기 위해 react-native-maps 패키지를 설치합니다.

npm install react-native-maps

3. 안드로이드 환경 설정

안드로이드에서는 추가적인 설정이 필요합니다. android/app/src/main/AndroidManifest.xml 파일에 다음 내용을 추가합니다.

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

4. 지도 표시

리액트 네이티브 컴포넌트에서 MapView를 import하여 사용합니다.


import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.5665,
          longitude: 126.978,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

5. 지도에 마커 추가

지도에 마커를 추가하여 특정 위치를 표시할 수 있습니다. 다음은 마커를 추가하는 예제입니다.


<MapView
  style={styles.map}
  initialRegion={{
    latitude: 37.5665,
    longitude: 126.978,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  <MapView.Marker
    coordinate={{ latitude: 37.5665, longitude: 126.978 }}
    title="서울"
    description="한국의 수도"
  />
</MapView>

위와 같이 MapView.Marker 컴포넌트를 사용하여 마커를 추가할 수 있습니다.

이제 위의 단계를 따라하면 리액트 네이티브 앱에서 지도를 표시하고 마커를 추가할 수 있습니다. 여기에 추가적으로 상호작용이나 사용자 위치 표시 등 다양한 기능을 더할 수 있습니다.

참고:

© 2018 Colin. All rights reserved.