在React Native中隐藏Android导航栏

我如何才能隐藏在本地的反应

我指的是屏幕底部有软件后退按钮和主页按钮的栏，而不是导航器组件附带的页面顶部的组件

---

说明如何为本机开发人员执行此操作。有人能解释一下如何通过React本地应用程序实现这一点吗？谢谢。

没有内置的API可以从JavaScript执行此操作

好消息是，在React Native中，您可以通过编写本机模块向JavaScript公开任何本机功能。看

---

通过这种方式，您可以提供一个JS函数，如

NavigationBarAndroid.hide（）

，并使其调用链接到的API。

基于Martin Konicek的答案：

我继续写了您需要的包和模块：

您需要将它添加到

getPackages

方法中的

MainActivity.java

文件中，并将包发送到ReactActivity对象，如下所示：

new NavigationBarAndroidPackage（this）

注意：代码未经测试，但它应该适合您（您需要更改第一行的

程序包

）。我只是使用了您发送的链接中提供的示例代码作为示例。根据您的需要进行修改。

使用以下选项：

用法：

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

---

如果你想永久性地实现这一目标，那么在创建应用程序时，当它重新聚焦时，你必须隐藏导航栏

为此，请将其添加到

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);
    }
}

您可能希望将其设置为“沉浸式”，以便用户仍然可以通过从屏幕底部拉动来访问导航栏。
为此，请添加
视图。系统\u UI\u标志\u沉浸式\u粘性
标志：

...
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导航栏，可以使用
react native Navigation bar color
显示或隐藏导航栏。您可以在文档[此处][1]中看到更多信息。请注意，它不会在Expo上工作，因为它要求您链接本机代码

安装相当简单：

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

然后您需要链接包：

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

完成后，您可以按以下方式使用它：

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

然后，当您想显示导航栏时，只需使用

ShowNavigationBar();

要隐藏它，您可以使用：

HideNavigationBar();

我是安卓9的，我做了测试

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

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

到目前为止，对我来说最好的解决方案是

路易斯·扎瓦兹基

在我的mainactivity.java上复制它可以很好地工作，并且总是在更改后隐藏。
我今天被困在了完全相同的位置。我找到了一篇完成这项工作的中篇文章。这个问题似乎很老了，但是，一些新读者可能会觉得这很有帮助


在本文中，作者编写了本地java方法来控制导航栏，然后使用react本地桥从react端访问这些方法

这是一篇很长的文章，但对我来说效果非常好！希望这有帮助
 好建议，马丁，谢谢。不幸的是，我是一个iOS的家伙，而不是一个安卓的家伙。如果这是iOS和iOS的问题，我可以很容易地跳进去。因为它是安卓系统，我真的需要投入大量的精力。这就是为什么我希望这是一个已经解决的问题。也许我会再次重温Java，但我希望有人能提出一个更简单的建议。这太棒了！只有一件事：是否可以在不将活动存储在字段中的情况下完成？活动将在屏幕旋转或应用程序进入后台时被销毁，我们正在泄漏旧实例，无法访问新实例。有一种方法可以在需要时获取模块中的上下文，请查看模块的基类。
getWindow（）
命令仅在
活动上可用，据我所知，无法通过
ReactApplicationContext
访问
ReactActivity
对象。我对Android世界还相当陌生，所以我对活动生命周期的了解有限。这里的正确方法是什么？如果
ReactApplicationContext
具有类似
getReactApplicationActivity（）
的方法，则可以解决此问题。实际上，我们的应用程序中的几个模块都需要
ReactActivity
，因此在此提供的任何帮助都将不胜感激。我认为许多应用程序将受益于访问
ReactActivity
对象的规范方式，因为访问
应用程序
，
窗口
等都需要它。（抱歉重复评论…愚蠢的长度限制：P）这真是太棒了，感谢您的快速转向。@MartinKonicek听起来您对内存使用有一些担心。您有没有其他建议的方法？结果发现还有一种方法getCurrentActivity，请务必阅读Javadoc：例如，它在DialogModule中使用。我不知道如何在我的应用程序中应用该代码项目，你的答案非常有用。谢谢！！如果我想动态更改它怎么办？