在React Native中隐藏Android导航栏

Question

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

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

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文档中找到更多选项。

Answer 2

要隐藏 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 3

建立在马丁·科尼克（Martin Konicek）的答案之上：

我继续写了这里需要的包和模块：https : //gist.github.com/dhrrgn/16a8dfa7581a682627c6

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

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

Answer 4

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

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

这样你就可以提供一个 JS 函数，NavigationBarAndroid.hide()并让它调用你链接到的 API。