Action intent

NetInfo API를 이용하여 기기의 네트워크의 연결 유무를 알 수 있습니다. 

geolocation에서와 같이 안드로이드에는 권한을 추가해 줘야 합니다. 

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

netinfo를 위해 npm module을 설치하고 link를 해줍니다.

npm install --save @react-native-community/netinfo

react-native link @react-native-community/netinfo

*iOS emulator의 경우 ios폴더 내에 pod install로 module을 설치해주자

1. netinfo.js를 생성하고 'react-native-community'에서 NetInfo import한다.

생성자에 connectionInfo: {}를 통해 연결 정보 state를 생성한다.

2. NetInfo를 통해 초기 연결 상태를 파악하고 state에 저장

NetInfo.fetch().then(connectionInfo => {
       console.log("Connection type", connectionInfo.type)
       console.log("Is connected?", connectionInfo.isConnected)
       this.setState(connectionInfo)
     })

3. 실시간으로 연결 정보를 파악할 수 있도록 리스너를 추가하여 그 결과를 state에 저장

NetInfo.addEventListener(connectionInfo => {
       console.log("Changed Connection type", connectionInfo.type);
       console.log("Is connected?", connectionInfo.isConnected);
       this.setState(connectionInfo)
     });

4. render에서 연결 type을 통해 어떤 연결 모듈을 가지고 있는지 출력하도록 한다.

iOS의 경우 개발중인 데스크탑의 wifi를 해제하면 none으로 연결 정보가 업데이트 되는 것을 확인 할 수 있다.

기기의 위도, 경도를 알아내기 위한 API를 구현해보겠습니다.

아래 명령어로 geolocation module을 설치합니다. 

npm install @react-native-community/geolocation -save

*설치 후 geolocation module link와 pod install을 진행해야 한다고 에뮬레이터에 가이드가 나올 수 있다 시키는대로 진행하자

위치 정보를 이용하기 위한 권한이 iOS의 경우 기본으로 활성화되어 있으나 안드로이드의 경우 AndroidManifest.xml에 아래 권한 요청을 추가해 줘야 합니다. (추가 후 앱 재실행)

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

1. geolocation.js를 만들고 geolocation을 추가한다

import Geolocation from '@react-native-community/geolocation'

2. 현재위치 정보, 새로운 위치 정보, 위치 정보 watch id를(해제를 위해) 저장하는 state 정의

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

3. 현재 위치 정보를 받아오는 로직을 componentDidMount에 정의

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

코드 실행 시 1회 현재 위치 정보를 얻어 state의 originalCoords에 저장, 에러 발생 시 로그 출력

4. 위치 정보가 갱신(기기가 이동) 할 때 마다 정보를 업데이트 하는 watch 정의

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

watch의 id를 저장해둬야 나중에 해제가 가능하다

5. watch를 해제하는 함수 추가

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

4에서 저장한 state 의 id를 사용하여 watch를 해제해준다.

6. render에 시작 시 위치, 업데이트 되면서 바뀌는 위치 정보를 표시해주도록 정의한다.

iOS emulator의 경우 Debug -> Location 메뉴를 통해 emulator의 위치 정보를 변경할 수 있고 변경 시 바로 앱의 위치 정보가 업데이트 됨을 확인 할 수 있다.

ClearWatch 버튼을 눌러 위치 정보 갱신을 중지하면 emulator의 위치 설정을 변경해도 더 이상 업데이트가 되지 않는 것을 확인 할 수 있다.

요번 포스팅은 복사, 붙여넣기 기능을 구현해 보도록 하겠습니다. 

이 API는 getString(), setString() 두 함수로 간단히 구현할 수 있습니다. 

1. clipboard.js를 생성하고 react-native에서 Clipboard, getString component를 import 합니다. 

2. componentDidMount 오버라이드 함수에 Clipboard.setString('HelloWorld')으로 초기 clipboard 값을 설정합니다. 

3. updateClipboard (string) 함수에서 inputText에 입력이 발생할 때 마다 Clipboard.setString(string)을 이용하여 clipboard에 입력된 텍스트를 넣어둡니다. 

4. 지난 비동기 함수 동작 방식으로 async-await를 이용하여 pushClipboardToArray() 함수에서 clipboard에 저장된 텍스트를 component state인 clipboardData 배열에 push 하도록 합니다.

*this.pushClipboardToArray = this.pushClipboardToArray.bind(this)로 async 함수를 binding하여 사용하도록 합니다. 

이제 사용자 이벤트(텍스트 입력, 클립보드 내용 저장 버튼)를 위해 render를 구성합니다. 

TextInput에서 onChangeText 이벤트가 발생하면 3번의 updateClipboard 함수가 호출 될 수 있도록 익명 함수를 설정합니다.

TouchableHighlight를 누르면 binding 시켰던 4번의 pushClipboardToArray 함수를 호출 하도록 구현합니다. 

clipboardData.map((d, i) => {
                    return <Text key={i}>{d}</Text>
                })

render 하단에 clipboardData 배열의 map을 이용하여 저장된 데이터를 출력해주는 로직입니다. 

map을 이용하면 배열 아이템 하나하나에 대해 전달된 익명 함수를 실행하게 되는데 그 인자로 저장된 데이터 d와 인덱스 i가 전달되고 Text 문을 return하여 데이터를 화면에 출력하게 됩니다. 

코드를 실행해보면 위와 같이 바로 버튼을 누르면 초기 설정값인 'HelloWorld'가 출력되고 텍스트를 입력 후 버튼을 누를때 마다 입력한 결과가 목록으로 출력되는 걸 볼 수 있습니다.