[React-Native] 날씨 앱 만들기(4/6)_Location Part.2

Location

사용자의 현재 위치 가져오기

const ask = async () => {
	...
      setOk(false);
    }
    // 추가 --------------------------------------------------------------------
    const location = await Location.getCurrentPositionAsync({ accuracy: 5 });
    console.log(location);
    // ------------------------------------------------------------------------
    
  };

 

 

추가하고 저장 후 새로고침 하면

coords 객체 안에 나의 현재 위치 정보가 나온다.

이 안에서 나는 위도와 경도만 가져오도록 한다.

 

const {
	coords: { latitude, longitude },
} = await Location.getCurrentPositionAsync({ accuracy: 5 });

const location = await Location.reverseGeocodeAsync(
      { latitude, longitude },
      { useGoogleMaps: false }
    );
    console.log(location);

 

 

위에서 location으로 받아왔던 현재위치를 위도 경도만 받아오도록 소스코드를 수정하고

아래에 Location.reverseGeocodeAsync() 메소드를 사용하여 위도, 경도로 도시 이름을 가져온다.

(location 출력해보면 도시 주소, 다 나옴)

 

 

앱 화면에 도시이름 작성

export default function App() {
  const [city, setCity] = useState("Loading...");
  
  ...
  
    { useGoogleMaps: false }
    );
  	setCity(location[0].city);
    
  	...
  
  
  <Text style={styles.cityName}>{city}</Text>

1. city 담을 변수 작성

2. location 객체에 담긴 도시 이름을 city에 설정

3. 기존에 Seoul로 되어있던 Text를 {city} 로 변경하여 내가 위치해 있는 도시명이 뜨도록 한다.

 

 

 

최종 소스코드

바뀐 부분 전체 사진 첨부함