react-native-device-info

2020-12-16 hit count image

유저의 디바이스 정보를 얻기 위해 react-native-device-info 라이브러리를 사용해보자

개요

사용자에 디바이스 정보를 얻기위해 RN 프로젝트 react-native-device-info 라이브러리를 사용해 보자.

라이브러리 설치

아래에 명령어로 react-native-device-info을 설치합니다.

npm install --save react-native-device-info

설치가 완료되면 아래에 명령어로 react-native-device-info 라이브러리와 프로젝트를 연결합니다.

cd ios
pod install

사용법

우리는 기본적으로 사용한적이 있는 경우만 블로그로 작성합니다. 따라서 여기에 작성된 내용은 우리가 사용할 때마다 추가될 것입니다.

사용법에 대한 자세한 사항은 공식 홈페이지를 참조하세요.

Unique ID

앱의 Unique ID를 얻습니다.

...
import DeviceInfo from 'react-native-device-info';
...

export default class Home extends React.Component<Props, State> {
    render() {
        const uniqueID = DeviceInfo.getUniqueID();
        // E98948E4-498D-447B-A750-D632C30461A3
        ...
    }
}

디바이스 구분

아래에 코드로 앱이 스마트폰에서 기동중인지, 태블릿에서 기동중인지 확인할 수 있습니다.

...
import DeviceInfo from 'react-native-device-info';
...

export default class Home extends React.Component<Props, State> {
    render() {
        const isTablet = DeviceInfo.isTablet();
        // tablet: true / phone: false
        ...
    }
}

에러 대응

잘 개발을 디바이스에서 랜덤하게 crash가 나는 문제가 발생했다. 시뮬레이터에서도 아래에 같은 메세지가 표시되었다.

RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

위에 문제를 해결하기 위해 아래와 같이 libRNDeviceInfo.a를 제일 하단으로 이동시켜 문제를 해결했다.

RCTBridge required dispatch_sync to load RCTDevLoadingView. error

아래에 링크는 에러를 고칠때 참고한 내용입니다.

참고

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
Posts