리액트 네이티브 expo 도전기 (3)

서론

웹 서비스에는 카카오 지도로 현재 내 위치를 찾아 그곳으로 지도 화면 중앙을 옮겨주는 서비스가 존재한다. 이걸 어플 내에서 구현을 해야하는데, expo에서 기기의 위치 정보 권한을 받아 이를 구현하는 부분까지 진행해보려 한다.

본론

기능 요구 정리

• 현재 기기의 위치 권한을 받을 타이밍 선정 (지도보기를 눌렀을 경우)
• 권한을 받기 위한 라이브러리 'expo-location' 적용

사용되는 라이브러리가 바뀌었다?

이전에는 'expo-permissions'라는 라이브러리로 카메라, 위치, 저장소 등 모든 권한을 받는 기능을 통합해서 사용했었는데, 이제는 각각의 라이브러리로 쪼개졌다.
그러나 함수의 사용 등 큰 틀은 크게 바뀌지 않은 것 같다.
(이거 때문에 또 레퍼런스를 잘못 찾아 이래저래 많이 헤맸다...)

실제 사용된 코드

• requestLocationPermission로 위치 정보를 받는 함수 만들기
• 웹뷰 내부 url이 변경될때마다 onNavigationStateChange 함수를 호출
• 웹뷰 url 변경시 함수가 지도페이지 url에 도착하면 requestLocationPermission 함수 호출

// App.jsx
import * as Location from 'expo-location';

export default function App() {
  const requestLocationPermission = async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status === 'granted') {
    } else {
      console.error("Location permission not granted");
    }
  };
  
  const onNavigationStateChange = async (navState) => {
    if (navState.url === "지도페이지 url") {
      await requestLocationPermission();
    }
  };
  
    return (
    <View style={styles.container}>
      <StatusBar />
      <WebView
        geolocationEnabled={true}
        source={{ uri: "서비스" }}
        ref={webViewRef}
        onNavigationStateChange={onNavigationStateChange}
      />
    </View>
  );
}

결론

• 레퍼런스를 찾을때는 늘 최신 레퍼런스를 찾아보자.
• expo와 같이 라이트한 개발 프레임워크를 사용하는 것은 정말 쉽게 기능구현을 하게 한다.