Reagieren Native Android-Vollbild-Statusleiste und transparente Anpassung der unteren Navigationsleiste

Vorwort

Kürzlich habe ich React Nativeein Projekt und beim Debuggen der Anwendung festgestellt, dass die obere Statusleiste und der untere Vollbild-Gestenanzeigebereich nicht transparent sind, was unangenehm aussieht. Nachdem ich dieses Problem ein wenig recherchiert habe, fasse ich nun die Lösung zusammen.

Relevante Wissenspunkte:

• React Nativenative Komponenten<StatusBar />
• React NativeMitgelieferte Haken −useColorScheme
• Überschreiben Sie die Lebenszyklusmethoden Main Activityder AnwendungonCreate
• Ändern Sie die styles.xmlKonfigurationsdatei

obere Statusleiste

Die obere Statusleiste React Nativekann <StatusBar />mit der bereitgestellten Komponente transparent gemacht werden

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;

untere Navigationsleiste

1. Offen/android/app/src/main/java/包名/MainActivity.java

2. Implementieren Sie die überschriebene Methode MainActivity.javainMainActivityonCreate

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

   Hinweis: Die Methode onCreate sollte innerhalb der öffentlichen Klasse MainActivity geschrieben werden, die ReactActivity erweitert

3. Gleichzeitig im MainActivity.javaKopf der importzugehörigen Klasse

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

4. Offen/android/app/src/main/res/values/styles.xml

5. styles.xmlInhalt hinzufügen zu

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

Bodeneffekt:

Letzte Worte

Informationen zur Vollbild-UI- und Gestenanpassung finden Sie in den zugehörigen Inhalten in Androidder Entwicklungsdokumentation https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps