React Native隐藏安卓底部导航栏及解决Release构建报错求助

Hey there! Let's break down how to fix your release build error and get that navigation bar hidden properly for your video pages.

Your error messages (missing dialogCornerRadius, fontVariationSettings, etc.) happen because the package uses Android SDK attributes that require a minimum compile/target SDK version, and your project's SDK versions don't match. Here are two reliable fixes:

Option 1: Align the package's SDK versions with your project #

1. Navigate to node_modules/react-native-navigation-bar-color/android/build.gradle
2. Update the following values to match the ones in your project's android/build.gradle (check the ext block in your project's root gradle file):

   compileSdkVersion rootProject.ext.compileSdkVersion
   targetSdkVersion rootProject.ext.targetSdkVersion
   

3. Also ensure the appcompat dependency matches your project's setup. If you're using AndroidX, replace the old support library line with:

   implementation 'androidx.appcompat:appcompat:1.6.1' // Use your project's appcompat version
   

4. To keep this change after future npm install, install patch-package and run:

   npx patch-package react-native-navigation-bar-color
   

Option 2: Upgrade your project's SDK versions #

If your project is using an older SDK version (below 28), update these values in your project's android/build.gradle:

buildscript {
    ext {
        compileSdkVersion = 33 // Or a higher stable version
        targetSdkVersion = 33
        buildToolsVersion = "33.0.2"
    }
}

This will add support for the missing attributes and resolve the linking errors.

You mentioned your MainActivity doesn't inherit AppCompatActivity—but in most React Native versions, ReactActivity (the default parent) extends AppCompatActivity under the hood. Here's how to implement permanent (or sticky) navigation bar hiding:

For Java MainActivity #

Open android/app/src/main/java/[your-package-name]/MainActivity.java and add these changes:

import android.os.Bundle;
import android.view.View;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    hideNavigationBar();
  }

  private void hideNavigationBar() {
    View decorView = getWindow().getDecorView();
    // Sticky immersive mode: navigation bar reappears temporarily on swipe, then hides again
    int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
    decorView.setSystemUiVisibility(uiOptions);
  }

  // Re-hide navigation bar when the app regains focus
  @Override
  public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus) {
      hideNavigationBar();
    }
  }

  // Keep your existing getMainComponentName() method
  @Override
  protected String getMainComponentName() {
    return "SLink";
  }
}

For Kotlin MainActivity #

Open android/app/src/main/java/[your-package-name]/MainActivity.kt and add:

import android.os.Bundle
import android.view.View
import com.facebook.react.ReactActivity

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    hideNavigationBar()
  }

  private fun hideNavigationBar() {
    val decorView = window.decorView
    val uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
            View.SYSTEM_UI_FLAG_FULLSCREEN or
            View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
    decorView.systemUiVisibility = uiOptions
  }

  override fun onWindowFocusChanged(hasFocus: Boolean) {
    super.onWindowFocusChanged(hasFocus)
    if (hasFocus) {
      hideNavigationBar()
    }
  }

  override fun getMainComponentName(): String {
    return "SLink"
  }
}

The IMMERSIVE_STICKY flag is perfect for video pages—it lets users temporarily bring back the navigation bar with a swipe, then auto-hides it after a few seconds.

If you prefer dynamic control (hide/show navigation bar for specific screens like video players), try these well-maintained packages:

• react-native-system-navigation-bar: Full-featured package for controlling navigation bar color, visibility, and more. Works reliably across RN versions.
• react-native-fullscreen: Lightweight option focused solely on fullscreen mode, including hiding status and navigation bars.

内容的提问来源于stack exchange，提问作者yash javeri