어떻게 로컬 지리적 위치를 사용하여 우편 주소를 얻습니까

React Native applications의 지리적 위치는 장치가 인터넷에 연결될 때 지리적 위치를 파악하는 기능입니다.API를 사용하여 디바이스의 현재 위치를 경위도 좌표로 제공합니다.장치의 간단한 위치 좌표를 가져오거나 장치의 현재 위치를 가져오는 등 기능을 추가할 수 있습니다.결국 지리적 포지셔닝은 배달이나 콜 애플리케이션의 개발 기능을 지원했다.
이 강좌에서, 우리는 장치의 현재 위치를 얻기 위해 React 본체 응용 프로그램에서 어떻게 기능을 실현하는지 이해한다.이를 위해 Expo에서 제공하는 API는 expo-location라는 패키지로 구성됩니다.그리고 우리는 위치 좌표를 인간이 읽을 수 있는 우편 주소 형식으로 바꿀 것이다.
소스 코드는 여기GitHub repo에서 확인할 수 있습니다.

선결 조건

이 자습서를 학습하려면 JavaScript/ES6을 숙지하고 로컬 개발 환경에서 다음 요구 사항을 충족해야 합니다.

설치된 버전Node.js>=12.x.x.

npm나 실이나 npx 같은 포장 매니저를 방문할 수 있다.

설치expo-cli 또는 npx

사용

expo cli를 사용하여 React 네이티브 애플리케이션 만들기

expo-cli를 사용하여 새로운React 원본 프로젝트를 만들고 이 프레젠테이션 프로그램 구축에 필요한 의존 항목을 설치합니다.이제 구현할 내용을 분석해 보겠습니다.

시범 프로그램은 식품 배달 응용 프로그램의 기능을 모의하여 최종 사용자가 응용 프로그램을 열 때 먼저 현재 위치를 알린다.이 화면을 환영 화면이라고 부르겠습니다.

위치를 가져와야만 최종 사용자가 응용 프로그램의 메인 화면으로 가져갈 수 있습니다.이것은 우리가 시범에서 사용할 조건이다.

우리는 React Navigation 라이브러리의 창고 내비게이션을 사용할 것이다.이것은 단지 React 원본 응용 프로그램에서 지리적 위치 데이터를 사용하는 개념을 이해하는 예일 뿐이다.현재 위치를 가져오는 기능을 실현할 때 같은 개념을 사용할 수 있다.

터미널 창을 열고 다음 명령을 실행합니다.

npx expo init expo-geolocation-example

# navigate into that directory
cd expo-geolocation-example
yarn add @react-navigation/native @react-navigation/stack

# install dependencies with Expo specific package version
expo install expo-location react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

이 의존항을 설치한 후, 두 개의 아날로그 화면을 만듭니다. 이것은 응용 프로그램의 두 핵심 화면이 될 것입니다.새 screens/ 디렉터리를 만들고 첫 번째 화면 파일 Welcome.js 을 만듭니다.현재, 이 화면에는 이미지, 제목, 가상 아날로그 위치 주소가 표시됩니다.본문 뒤에 이 가상 아날로그 위치 주소는 현재 위치를 바탕으로 실제 주소를 표시합니다.
이 파일에 다음 코드 세그먼트를 추가합니다.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const Welcome = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Image source={require('../assets/geo.png')} style={styles.image} />
        <Text style={styles.title}>What's your address?</Text>
      </View>
      <Text style={styles.text}>Mock Address</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    paddingTop: 130
  },
  contentContainer: {
    alignItems: 'center',
    marginBottom: 20
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: 'contain',
    marginBottom: 20
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#FD0139'
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
    color: '#fff'
  }
});

export default Welcome;

다음 코드 세그먼트를 사용하여 두 번째 화면 파일을 만듭니다Home.js.

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

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default Home;

이 프레젠테이션 프로그램에 여러 개의 파일과 다른 내비게이션 방식이 없기 때문에 App.js 파일에 창고 내비게이션 용기를 연결합니다.나는 React 네비게이션 라이브러리를 어떻게 설정하고 사용하는지 소개하지 않을 것이다.이 주제에 대한 정보를 더 알고 싶으면 댓글How to Set Up and Use Navigators in React Native을 보세요.App.js 파일을 열고 다음을 추가합니다.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Custom screens
import Welcome from './screens/Welcome';
import Home from './screens/Home';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Welcome' headerMode='none'>
        <Stack.Screen name='Welcome' component={Welcome} />
        <Stack.Screen name='Home' component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

탐색기를 설정하면 터미널 창을 열고 명령을 실행할 수 있습니다expo start.iOS 에뮬레이터, 안드로이드 에뮬레이터, Expo Go 클라이언트 프로그램을 선택해서 지금까지의 결과를 볼 수 있습니다.다음은 iOS 에뮬레이터에서 응용 프로그램의 현재 상태입니다.

장치 위치 서비스가 활성화되었는지 확인

프레젠테이션 프로그램에서 우리가 실현하고자 하는 첫 번째 일은 장치의 위치 서비스가 활성화되었는지 확인하는 것이다.이를 위해 locationServiceEnabled 라는 상태 변수를 만듭니다.
서비스의 상태를 검사하기 위해서 CheckIfLocationEnabled 라는 새로운 처리 프로그램을 만듭니다.expo-location에는 Location.hasServicesEnabledAsync()라는 비동기적인 방법이 있다.장치의 위치 서비스가 활성화되어 있으면, 부울 값true를 되돌려주고, 그렇지 않으면false를 되돌려줍니다.값이false이면 같은 값을 표시하는 경고 상자를 표시합니다.위치 서비스가 활성화되어 있으면 상태 변수의 값을 setLocationServiceEnabled 방법으로 업데이트합니다.
그리고 useEffectReact 갈고리에서handler 방법을 사용합니다. 이 갈고리는 의존항이 없기 때문에 첫 번째 렌더링 후에만 터치합니다.
수정Welcome.js 화면은 다음과 같습니다.displayCurrentAddress라는 상태 변수를 사용하여 아날로그 위치 주소 위치에 표시되는 자리 표시자 메시지를 확인합니다.장치의 현재 위치를 찾으면 업데이트됩니다.

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

const Welcome = ({ navigation }) => {
  const [locationServiceEnabled, setLocationServiceEnabled] = useState(false);
  const [displayCurrentAddress, setDisplayCurrentAddress] = useState(
    'Wait, we are fetching you location...'
  );

  useEffect(() => {
    CheckIfLocationEnabled();
  }, []);

  const CheckIfLocationEnabled = async () => {
    let enabled = await Location.hasServicesEnabledAsync();

    if (!enabled) {
      Alert.alert(
        'Location Service not enabled',
        'Please enable your location services to continue',
        [{ text: 'OK' }],
        { cancelable: false }
      );
    } else {
      setLocationServiceEnabled(enabled);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Image source={require('../assets/geo.png')} style={styles.image} />
        <Text style={styles.title}>What's your address?</Text>
      </View>
      <Text style={styles.text}>{displayCurrentAddress}</Text>
    </View>
  );
};

// styles remain same

export default Welcome;

iOS 에뮬레이터에서 테스트를 수행하려면 설정 > 개인 정보 보호 > 위치 서비스로 이동하십시오.

위의 그림에서 보듯이, on이 나타나면, 그것을 클릭하고 위치 추적 서비스를 닫는지 확인하십시오.

지금 프로그램을 열면 경보 상자가 나타나는 것을 알 수 있습니다.

마찬가지로 Android 장치에서는 다음 메뉴에서 이 위치를 비활성화할 수 있습니다.

프로그램이 열릴 때 경고 메시지가 표시됩니다.

다음 섹션을 계속하기 전에 디바이스에 위치 서비스가 다시 설정되어 있는지 확인하십시오.

현재 위치 및 우편 주소 가져오기

위치 정보든 기타 민감한 정보든 장치에 접근할 정보를 요청할 필요가 있습니다.다행히도, expo-location 장치의 현재 위치를 얻을 때 직접 사용할 수 있는 방법이 있습니다.
디바이스의 현재 위치를 가져오고 애플리케이션 화면에 표시할 현재 주소(이름, 거리 이름, 도시 및 우편 번호 포함)에 대한 정보를 가져오는 방법에 대해 자세히 설명합니다.

우선 GetCurrentLocation라는 새로운 비동기 처리 프로그램을 만듭니다.앞의 코드 다음에 useEffect 갈고리에서 그것을 호출해야 합니다.

그 내부에서 Location API 방법requestPermissionsAsync을 사용하여 장치를 요청한 사용자에게 이 위치의 권한을 부여합니다.만약 어떤 상황에서도 사용자가 거절한다면, 그들에게 같은 상황을 설명하는 경고 상자를 보여 주십시오.

라이센스가 부여되면 location API 방법getCurrentPositionAsync을 사용하여 장치 위치의 현재 좌표를 가져옵니다.이곳의 좌표는 위치를 나타내는 대상이다.

그리고 좌표 대상이 존재할 때 위도와 경도의 값을 분해한다.Location API에는 위치의 지리적 번호를 우편 주소로 반전시키는 reverseGeocodeAsync라는 방법이 있습니다.이 결과를 사용하면 장치의 현재 주소를 표시하기 위해 setDisplayCurrentAddress 의 값을 업데이트할 수 있습니다.

업데이트Welcome.js의 코드 세그먼트는 다음과 같습니다.

// first update the useEffect hook
useEffect(() => {
  CheckIfLocationEnabled();
  GetCurrentLocation();
}, []);

// create the handler method

const GetCurrentLocation = async () => {
  let { status } = await Location.requestPermissionsAsync();

  if (status !== 'granted') {
    Alert.alert(
      'Permission not granted',
      'Allow the app to use location service.',
      [{ text: 'OK' }],
      { cancelable: false }
    );
  }

  let { coords } = await Location.getCurrentPositionAsync();

  if (coords) {
    const { latitude, longitude } = coords;
    let response = await Location.reverseGeocodeAsync({
      latitude,
      longitude
    });

    for (let item of response) {
      let address = `${item.name}, ${item.street}, ${item.postalCode}, ${item.city}`;

      setDisplayCurrentAddress(address);
    }
  }
};

다음은 이 단계 이후의 출력입니다.

전체 우편 주소는 JSON 형식의 대상이며 다음과 같은 필드가 있습니다(일부 필드는 여러 가지 상황에 적용될 수 있습니다).

Object {
    "city": "Stockholm",
    "country": "Sweden",
    "district": "Stockholm City",
    "isoCountryCode": "SE",
    "name": "Gustav Adolfs torg",
    "postalCode": "111 52",
    "region": "Stockholm",
    "street": "Gustav Adolfs torg",
    "subregion": "Stockholm",
    "timezone": "Europe/Stockholm",
}

위치를 가져오면 현재 우편 주소를 대상으로 보내고 setTimeout 기능을 사용하여 2초 지연 후 메인 화면으로 이동할 수 있습니다.
문setDisplayCurrentAddress(address) 뒤에 다음 코드 세그먼트를 추가합니다.

if (address.length > 0) {
  setTimeout(() => {
    navigation.navigate('Home', { item: address });
  }, 2000);
}

그리고 Home.js 파일을 업데이트하여 item로부터 route.params 대상과 스타일을 가져옵니다.

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

const Home = ({ route }) => {
  const { item } = route.params;
  return (
    <View style={styles.container}>
      <View style={styles.contentContainer}>
        <Text style={styles.title}>Home Delivery address: </Text>
        <Text style={styles.text}>{item}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#070707',
    alignItems: 'center',
    justifyContent: 'center'
  },
  contentContainer: {
    paddingHorizontal: 20,
    alignItems: 'center'
  },
  title: {
    fontSize: 22,
    fontWeight: '700',
    color: '#FD0139',
    paddingBottom: 10
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
    color: '#fff'
  }
});

export default Home;

다음은 최종 출력입니다.

결론

이렇게!우리는 이 강좌가 당신에게 도움이 되기를 바랍니다.Expo 및 React 네이티브 애플리케이션에서 Location API를 사용할 수 있는 정보와 특정 용도에 사용할 수 있는 다른 소프트웨어 패키지에 대한 자세한 내용은 다음과 같은 참고 자료를 추가합니다.

Reverse Geocode from expo-location

@react-native-community/geolocation

react-native-geolocation-service

마지막으로 민감한 논리를 포함하는 비즈니스 원본 프로그램을 개발하고 있다면 각별한 주의를 잊지 마세요.코드 절도, 변경, 역방향 프로젝트의 영향을 받지 않도록 다음과 같은 방식으로 보호할 수 있습니다.