본문 바로가기

JavaScript

[ReactNative] Location

728x90
import React, { useState, useEffect } from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({ ... });

- requestForegroundPermissionsAsync
- getCurrentPositionAsync

- reverseGeocodeAsync (API_KEY 발급 받아야 함)

- 3가지 api를 활용해서 위치 정보 추출

300x250

'JavaScript' 카테고리의 다른 글

React Native의 markup  (0) 2022.07.19