react-native-device-info

2023-03-18 hit count image

ユーザーのデバイスの情報を取得するため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プロジェクトへリンクさせます。

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

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

参考

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts