React Native Surface Duo 用 DualScreenInfo の使用

DualScreenInfo は、コードとレイアウトがデュアルスクリーンに適応できるよう、デバイスに関する情報を提供する非ビジュアル ヘルパーです。 次のメソッドが含まれます。

• isDualScreenDevice – 他のデュアルスクリーン固有の API にアクセスする前に、これを確認してください。
• isSpanning – アプリが 1 画面または 2 画面にあるかどうか。
• windowRects – 2 つの表示四角形の境界 (ヒンジ領域を除く)。
• didUpdateSpanning – イベント リスナー。アプリが 1 つの画面にスパンまたは移動された場合にコードが応答できます。

インストール

react-native-dualscreeninfo のインストール手順に従います。

1. android/build.gradle を変更して Kotlin サポートを追加します。

   buildscript {
     ext {
       ...
   +   kotlinVersion = "1.3.50"
     }
   ...
   
     dependencies {
   +   classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
   ...
   

2. を実行 npm install react-native-dual-screen して SDK パッケージを追加します。

3. 次の android:configChanges オプションを含めて変更します。

   android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout"
   

サンプル

インストールが完了したら、サンプル を 試してみてください。

source

DualScreenInfo は、オープンソース コンポーネントで、GitHub。