React Native Android full screen status bar and bottom navigation bar transparent adaptation

foreword

Recently I was writing React Nativea project , and when debugging the application, I found that the top status bar and the bottom full-screen gesture indicator area are not transparent, which looks uncomfortable. Having researched this problem a bit, I now summarize the solution.

Relevant knowledge points:

• React Nativenative components<StatusBar />
• React NativeProvided Hooks −useColorScheme
• Override the application Main Activity's onCreatelifecycle methods
• Modify the styles.xmlconfiguration file

top status bar

The top status bar React Nativecan <StatusBar />be made transparent using the provided component

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;

bottom navigation bar

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

2. Implement the overridden method MainActivity.javainMainActivityonCreate

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

   Note: the onCreate method should be written inside the public class MainActivity extends ReactActivity

3. At the same time, in MainActivity.javathe head of the importrelated class

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

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

5. styles.xmlAdd content to

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

Bottom effect:

Last words

For full-screen UI and gesture adaptation, please refer to the related content in Androidthe development documentation https://developer.android.com/develop/ui/views/layout/edge-to-edge#handle-overlaps