React Native

React native 지오로케이션 GeoLocation

Machine_웅 2020. 1. 16. 17:09
728x90
반응형
import React,{Component} from 'react';
import {
  Clipboard,
  getString,
  AppState,
  TextInput,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Dimensions,
  Platform,
  PermissionsAndroid
} from 'react-native';

import Geolocation from '@react-native-community/geolocation'
export default class App extends Component {


  constructor(){
    super()



    this.state = {
      originalCoords:{},
      updatedCoords:{},
      id:''
    }

    this.clearWath = this.clearWath.bind(this)

    this.androidPermissionCheck = this.androidPermissionCheck.bind(this)
  }

  componentDidMount(){

    Geolocation.getCurrentPosition(
      (info) =>{
        this.setState({originalCoords:info.coords})
      },
      (err) =>console.log('err: ',err)
    )

    let id = Geolocation.watchPosition(
      (success) =>{
        this.setState({
          id,
          updatedCoords:success.coords
        }),
        (err) =>console.log('err: ',err)
      }
    )
  }


  clearWath(){
    Geolocation.clearWatch(this.state.id)
  }


  androidPermissionCheck= () =>{

    var that = this;
    async function requestCameraPermission() {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: '위치 퍼미션',
          message: '퍼미션을 설정하시겠습니까?',
        }
      );
      
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('위치검색 퍼미션 있음')
        that.proceed();
      } else {
        alert('퍼미션 거부');
      }
    }
    if (Platform.OS === 'android') {
      requestCameraPermission();
    } else {
      this.proceed();
    }

  }


  render() {
    
    const {originalCoords,updatedCoords} = this.state

    return (
      <View style={{ justifyContent: 'center',flex: 1,padding:20}}>
        <TouchableHighlight 
          onPress={() =>this.androidPermissionCheck}
          style ={{justifyContent:'center'} }>
           <Text style ={{textAlign:'center'}}> 안드로이드 퍼미션 요청하기</Text>
        </TouchableHighlight>

        <Text> originalCoords </Text>
        <Text> Lat : {originalCoords.latitude}</Text>
        <Text> Lng : {originalCoords.longitude}</Text>

        <Text> updatedCoords </Text>
        <Text> Lat : {updatedCoords.latitude}</Text>
        <Text> Lng : {updatedCoords.longitude}</Text>

        <TouchableHighlight
          onPress ={this.clearWath}
        >
            <Text>Clear Watch</Text>

        </TouchableHighlight>
        
      </View>
    )
  }

}
728x90
반응형