あなたの反応ネイティブアプリにノッチサポートを追加する

このチュートリアルでは、どのように適切にノッチ(別名“ディスプレイカットアウト”のAndroid、IOSとWebコードのいくつかの行をサポートする方法を学びます.
以下はアンドロイドエミュレータです.

If you don't have an Android device with Notch, open an Android Emulator and emulate the display cutout by going to Android Settings > System > Advanced > Developer options > Display cutout > Double cutout

上のスクリーンショットでは、壁紙のノッチの背後に表示されることがわかります.それは正しい行動であり、あなたのアプリもそれを行う必要があります.
しかし、単純なアプリケーションをレンダリングするときに何が起こるかを見てみましょう

デフォルトでは、アプリケーションのノッチを処理しません.上の画像を見ることができます2つの黒いバーをレンダリングし、画面をユーザーにより小さく感じる.それはよくない、それを修正しましょう.
ここでは楽しいスタート.時間のために異なる方法を研究して、試みた後に、私はこれがあなたがDouble cutoutに加える必要があることであるとわかりました:

public class MainActivity extends ReactActivity {

+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+            WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
+            layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
+            getWindow().setAttributes(layoutParams);
+            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+        }
+
+        super.onCreate(savedInstanceState);
+    }

このコードは3つのことをしています:MainActivity.javaからlayoutInDisplayCutoutModeに設定され、黒いバーを表示するのを止め、edgeInsetsとstatusをnavigationに設定し、ノッチやナビゲーションボタンの後ろにアプリをレンダリングします.
以下にこのコードを追加した結果を示します.

はい!それは改善だ.今、我々は画面全体を使用します.しかし、あなたはテキスト内容がノッチによって隠されているのを見ることができます.
ネイティブに反応するコンポーネントはSafeAreaViewと呼ばれます.それはこの正確な問題を修正します.iPhone XだけではまだAndroidのサポートを持っていません.
おかげで、我々は必要なすべてのプラットフォームをサポートreact-native-safe-area-contextを使用することができます:iOS、AndroidとWeb!

If you use Expo, this lib will be included on SDK v35

If you use react-native < 0.60, you can apply this patch using patch-package

APIは次のようになります.

const safeAreaInsets = useSafeArea()

そして、translucentにパドルを追加します.

<View
  style={{
    flex: 1,
    paddingTop: safeAreaInsets.top,
    paddingBottom: safeAreaInsets.bottom,
    paddingLeft: safeAreaInsets.left,
    paddingRight: safeAreaInsets.right,
  }}
>

最後に結果を示します.

完全に働く🎉🎉🎉
Androidは準備ができました、今、我々のIOSアプリがどのように見えるかについて見ましょう:

IOSはすでに完璧です!🎉
3から2です.ウェブについては?見ましょう

ハム、ウェブはまだ黒いバーを見せています.

If your app doesn’t support web yet, check out my other tutorial:

しかし修正するのは簡単ですが、Viewメタタグにviewport-fit=coverを追加するだけです.

-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

そして、Vilは引きます!我々のアプリは、適切にiOS、AndroidとWeb上のノッチをサポートしています!そして再び、それは素晴らしいreact-native-safe-area-contextにこの簡単なおかげであった.
ここでは、上記のコードでgistがあります.これは、あなたがつぶやきと私のTwitterアカウントにしたい場合です.💚
読書ありがとう!