在React Native中隐藏Android导航栏

Question

如何在 React Native 中隐藏 Android 导航栏？

我指的是屏幕底部带有软件返回按钮和主页按钮的那个条形栏，而不是随着导航器组件一起出现在页面顶部的组件。

这篇 Android 官方文档 解释了如何在原生开发中实现隐藏。有人可以解释一下如何通过 React Native 应用程序实现吗？谢谢。

- Axeva

Answer 1

如果你想永久实现这个效果，你需要在应用创建时和重新获得焦点时隐藏导航栏。

要这样做，请在你的MainActivity.java中添加以下内容:

...
import android.os.Bundle;
import android.view.View;

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideNavigationBar();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }

    private void hideNavigationBar() {
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
    }
}

你可能希望使其“沉浸式”，这样用户可以通过从屏幕底部拉动来访问导航栏。 要实现此功能，请添加View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY标志：

...
import android.os.Bundle;
import android.view.View;

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        hideNavigationBar();
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideNavigationBar();
        }
    }

    private void hideNavigationBar() {
        getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);

    }
}

您可以在Android文档中找到更多选项。

- Louis Zawadzki

---

我之前不知道如何在我的项目中应用这段代码，你的回答非常有帮助。谢谢！ - brouk.develop

如果我想要动态地更改它呢？ - shoopi

这个答案是可行的，你只需要将所有这些方法添加到位于“android/app/src/main/java/[...]/MainApplication.java”内的文件MainActivity.java中即可。 - Gabriel

我无法在模拟器中看到导航栏，所以我只能依靠客户的Pixel 4。我已经按照上面所述更新了MainActivity.java，但他们说他们仍然看到该栏。以上代码是否已过时？ - JCraine

当我这样做时，如果我在应用程序中点击，它会立即失去全屏状态。我该如何避免这种情况？ - Elliptica

Answer 2

隐藏Android导航栏可以使用react-native-navigation-bar-color，它允许你显示或隐藏导航栏。你可以在这里查看更多文档。请注意，它不会在Expo上工作，因为它需要链接本地代码。

安装非常简单：

npm install react-native-navigation-bar-color --save

那么你需要链接此包（仅适用于 react-native <= 0.59.0）:

react-native link react-native-navigation-bar-color

一旦你完成了这个步骤，你就可以按照以下方式使用它：

import {
  HideNavigationBar,
  ShowNavigationBar,
} from 'react-native-navigation-bar-color';

然后，当您想要显示导航栏时，只需使用以下代码

ShowNavigationBar();

要隐藏它，可以使用以下方法：

HideNavigationBar();

- Andrew

Answer 3

在Martin Konicek的回答基础上:

我已经为你编写了所需的包和模块，链接如下：https://gist.github.com/dhrrgn/16a8dfa7581a682627c6

你需要将它添加到你的MainActivity.java文件中的getPackages方法，并像这样发送ReactActivity对象：new NavigationBarAndroidPackage(this)

注意：代码未经测试，但应该适用于你（你需要更改第一行的package）。我只是使用你提供的链接中的示例代码作为示例。修改以符合你的需求。

- Dan Horrigan

---

这太棒了！只有一个问题：能否在不将Activity存储在字段中的情况下完成吗？当屏幕旋转或应用程序进入后台时，Activity将被销毁，我们会泄漏旧实例并且无法访问新实例。但是，在模块仅在需要时获取上下文的方法，请查看模块的基类。 - Martin Konicek

太棒了，谢谢你的快速回应。@MartinKonicek听起来你对内存使用有些担忧。你有什么其他的建议吗？ - Axeva

原来还有一个 getCurrentActivity 方法，确保阅读 Javadoc： https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/bridge/ReactContextBaseJavaModule.java例如，在 DialogModule 中使用。 - Martin Konicek

啊，不确定我是怎么错过那个马丁的。谢谢你指出来。我已经相应地更新了Gist。 - Dan Horrigan

最终回到这个问题。上面的方法可以暂时隐藏导航栏，但是一旦您与屏幕进行交互（例如滚动），它就会返回。我尝试了各种变化，但结果总是相同的。唉，看来这并不像我所希望的那样容易。 - Axeva

Answer 4

我已经创建了一个包，可以隐藏/显示导航栏、改变颜色等功能。

react-native-system-navigation-bar

安装

yarn add react-native-system-navigation-bar

或者

npm install react-native-system-navigation-bar

Links

https://www.npmjs.com/package/react-native-system-navigation-bar

https://github.com/kadiraydinli/react-native-system-navigation-bar

- kadiraydinli

Answer 5

针对 Expo 构建:

  expo install expo-navigation-bar

防止内容与导航栏跳动

  NavigationBar.setPositionAsync("absolute");

隐藏导航栏

  NavigationBar.setVisibilityAsync("hidden");   

透明背景

  NavigationBar.setBackgroundColorAsync("#ffffff00");

用户仍然可以滑动屏幕以显示按钮

  NavigationBar.setBehaviorAsync("inset-swipe");

我试图用<TouchableWithoutFeedback>包装我的屏幕，以便能够使用onPress属性和NavigationBar.setVisibilityAsync("hidden")，但即使没有onPress，底部导航栏在滑动时也只会显示一瞬间。

- besthost

---

运行完美。 - Caleb C. Adainoo

Answer 6

请使用以下代码：https://github.com/Anthonyzou/react-native-full-screen

用法：

import FullScreen from 'react-native-full-screen'
FullScreen.onFullScreen()
FullScreen.offFullScreen()

- Croolsby

Answer 7

没有内置的API可以从JavaScript中完成这个任务。

好消息是，在React Native中，您可以通过编写本地模块将任何本地功能公开给JavaScript。请参见文档。

这样，您就可以提供一个JS函数，例如NavigationBarAndroid.hide()，并使其调用您链接到的API。

- Martin Konicek

---

很好的建议，Martin，谢谢。不幸的是，我是一个iOS开发者，而不是Android开发者。如果这是一个iOS的问题，我可以轻松介入并解决。但既然是Android，我将不得不付出很大的努力。这就是为什么我希望这个问题已经有人解决了。也许重新学习Java时会有所启发，但我仍然抱着希望，希望有人能给出一个更简单的建议。 - Axeva

Answer 8

今天我也被卡在同样的地方了。我找到了一篇中等难度的文章来解决这个问题。虽然这个问题看起来很老，但一些新读者可能会觉得有所帮助。

https://medium.com/@mykl.ashton/how-to-hide-the-android-pie-navigation-bar-in-react-native-895e34c9e41

在本文中，作者编写了原生Java方法来控制导航栏，然后使用React Native桥接从React端访问这些方法。

这是一篇很长的文章，但对我非常有用！希望能对你有所帮助！

- Suraj Ingle

Answer 9

我在Android 9上进行了测试

import {HideNavigationBar} from 'react-native-navigation-bar-color';

但是当使用Alt+Tab切换到另一个应用程序并返回时，导航栏会再次出现。

目前对我来说最好的解决方案就是如上所述

Louis Zawadzki

将其复制到我的mainactivity.java中可以很好地工作，并且在更改后始终隐藏。

- Edison Sanchez