React Native Android フル スクリーン ステータス バーと下部ナビゲーション バーの透明な適応

序文

最近、React Nativeプロジェクトを、アプリケーションをデバッグしているときに、上部のステータス バーと下部の全画面ジェスチャー インジケーター領域が透明ではなく、不快に見えることがわかりました。この問題を少し調べたので、解決策を要約します。

関連する知識ポイント:

• React Nativeネイティブ コンポーネント<StatusBar />
• React Native提供されるフック-useColorScheme
• アプリケーションMain ActivityのonCreateライフサイクル メソッドをオーバーライドする
• styles.xml構成ファイルを変更する

トップステータスバー

上部のステータス バーはReact Native、<StatusBar />提供されたコンポーネントを使用して透明にすることができます

import {
    
     View, StatusBar, useColorScheme } from "react-native";
import type {
    
     FC } from "react";

const App: FC = () => {
    
    
    const colorScheme = useColorScheme();
    return (
        <View>
            <StatusBar
                translucent={
    
    true}
                backgroundColor="rgba(0,0,0,0)"
                barStyle={
    
    colorScheme === 'dark' ? 'light-content' : 'dark-content'} // 设置文字颜色
            />
        </View>
    )
}

export default App;

下部のナビゲーション バー

1. 開ける/android/app/src/main/java/包名/MainActivity.java

2. MainActivity.javaのMainActivityクラスにオーバーライドされたonCreateメソッド

   @Override
   protected void onCreate(Bundle savedInstanceState) {
         
         
     super.onCreate(savedInstanceState);
     WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
   }
   

   注: onCreate メソッドは、パブリック クラス MainActivity extends ReactActivity 内に記述する必要があります。

3. 同時に、関連するMainActivity.javaクラスの先頭にimport

   import android.os.Bundle;
   import androidx.core.view.WindowCompat;
   

4. 開ける/android/app/src/main/res/values/styles.xml

5. styles.xmlにコンテンツを追加

    <item name="android:navigationBarColor">@android:color/transparent</item>

ボトム効果:

最後の言葉

フルスクリーン UI とジェスチャの適応については、Android開発https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps