react-native-device-info

2019-06-05

ユーザーのデバイスの情報を取得するためreact-native-device-infoライブラリを使って見ましょう。

概要

ユーザーのデバイス情報を取得するためリアクトネイティブ(React Native)プロジェクトへreact-native-device-infoライブラリを使ってみmしょう。

react-native-device-infoライブラリインストール

下記のコマンドでreact-native-device-infoをインストールします。

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

インストールが終わったら下記のコマンドでreact-native-device-infoライブラリをRNプロジェクトへリンクさせます。

react-native link react-native-device-info

使い方

私たちは基本的使ったことがある場合、ブログを作成します。したがってここには私たちが実際使って分かった内容を追加する予定です。

使い方を詳しく知りたい方は公式サイトを見てください。

device locale

device localeの情報を取得する方法。

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

export default class Home extends React.Component<Props, State> {
    render() {
        const deviceLocale = DeviceInfo.getDeviceLocale();
        // iOS: "en"
        // Android: "en-US"
        ...
    }
}

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

下のリンクはエラーを直す時参考した内容です。

参考

Buy me a coffeeBuy me a coffee
Posts