web-dev-qa-db-ja.com

React-Native Detect Screen Notch

アプリのUIフレームワークとしてnativebase.ioを使用しています。

私の問題

IOSデバイスにiPhoneシミュレーターがiPhone Xをシミュレートしている場合（画面上部にノッチがある場合）、ヘッダーを入力すると、Header要素がこれを自動的に検出して移動します画面の下のヘッダー要素。

some Androidデバイスにも画面上部に同様のノッチがありますが、nativebase.ioヘッダー要素を使用すると、ノッチが検出されず、ヘッダーがノッチに重なります。

私の質問

react-nativeまたはnativebase.ioでディスプレイにノッチがあるかどうかを検出する方法はありますか？これにより、ヘッダーを動的にオフセットできます。

react-nativenative-base
15
X0r0N

問題はAndroidにあるため、StatusBar.currentHeightを調べてみてください。ノッチは通常ステータスバーの一部であるため、ヘッダーの上部にパディングを追加すると、ステータスバーのサイズがおそらくそれを行うはずです。

9
Filipe

Expoを使用しない

React Expoなしのネイティブ、またはイジェクトされたExpoアプリを使用している場合は、 react-native-device-info パッケージを使用できます。hasNotch()関数があります。そのようなデバイスを検出するのに非常にうまく機能します。

Native Base Content、Footer、およびHeaderコンポーネントは、isIphoneXテーマ変数を検査して、デバイスのノッチにスペースを追加するかどうかを決定します。

Native Baseテーマをカスタマイズ して、react-native-device-infoを使用してノッチを検出するように変数ファイルを変更できます。

# native-base-theme/variables/*.js
import DeviceInfo from 'react-native-device-info';
...
isIphoneX = DeviceInfo.hasNotch();
...

これで、Native Base Header、Footer、およびContentコンポーネントは、ノッチのあるデバイスに適切な間隔を追加する必要があります。

Expoの使用

react-native-device-infoはExpoプロジェクトでは機能しないため、これを行う簡単な方法はありません。目標を達成するには関数を作成する必要があります。 hasNotch()ソースコード を調べると、関数は単にデバイスのbrandとmodelに基づいて配列ルックアップを行うことに気付くでしょう。 Expo Constants を使用してデバイスモデルを取得できますが、簡単ではありません。

import { Platform } from 'react-native;
import Constants from 'expo-constants';

const getDeviceModel = () => Platform.select({
  ios: Constants.platform.ios.model,
  Android: Constants.deviceName
});

ただし、Expoでデバイスbrandを取得する方法はありません。明らかに、すべてのiosデバイスにはAppleのブランドがありますが、Androidデバイスブランドの方がわかりにくいです。デバイスmodelを使用しますが、それほど正確ではない場合があります。

Expoユーザーにとってより良いソリューションがあればいいのにと思います。

2
Tom Aranda

私はこの答えからのアプローチを使用しています https://stackoverflow.com/a/53593067/923497 それは私のためにうまく機能しています。

In React Nativeは次のようになります

import { StatusBar, Platform } from 'react-native';

if (Platform.OS === 'Android') {
  const hasNotch = StatusBar.currentHeight > 24;
}
0
Dmitri Portenko

React Native。現在のビューをラップします。詳細については、このリンクを参照してください。 https://facebook.github.io/react-native/docs/ safeareaview

<SafeAreaView style={{flex: 1}}>
   [...Your view component]
</SafeAreaView>
0
MangMentongTV