Question

如何在React Native中隐藏Android Navigation Bar？

我指的是屏幕底部的栏，其中包含软件后退按钮和主页按钮，而不是导航器组件随附的页面顶部的组件。

This page on android.com解释了如何为本地开发人员执行此操作。有人可以通过React Native应用程序解释如何实现这一目标吗？感谢。

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 documentation上找到更多选项。

Answer 2

建立Martin Konicek的答案：

我继续编写了您需要的软件包和模块：https://gist.github.com/dhrrgn/16a8dfa7581a682627c6

您需要将其添加到MainActivity.java方法的getPackages文件中，并将包发送到ReactActivity对象，如下所示：new NavigationBarAndroidPackage(this)

注意：代码未经测试，但它应该适合您（您需要更改第一行的package）。我只是使用您发送的链接中提供的示例代码作为示例。根据您的需要进行修改。

Answer 3

要隐藏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();

Answer 4

没有内置API可以通过JavaScript执行此操作。

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

通过这种方式，您可以提供类似NavigationBarAndroid.hide()的JS函数，并使其调用您链接的API。

Answer 5

使用此：https://github.com/Anthonyzou/react-native-full-screen

用法：

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

Answer 6

我在Android 9中测试了

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

但是当“使Alt”跳至另一个应用程序并返回时，导航栏再次出现。

直到现在，对我来说最好的解决方案就是

路易斯·扎瓦兹基（Louis Zawadzki）

将其复制到我的mainactivity.java上可以正常工作，并且始终在更改后隐藏。

Answer 7

我今天被困在同一时间。我找到了一篇完成工作的中篇文章。这个问题似乎已经很老了，但是，一些新读者可能会发现这很有帮助。

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

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

这是一篇很长的文章，但是对我来说工作非常出色！希望这会有所帮助！

Answer 8

我创建了一个包含导航栏隐藏/显示、颜色更改等功能的包。

react-native-system-navigation-bar

安装

yarn add react-native-system-navigation-bar

或

npm install react-native-system-navigation-bar

链接

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

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

在React Native中隐藏Android导航栏

8 个答案: