在React Native中隐藏Android导航栏 [英] Hide Android Navigation Bar in React Native

问题描述

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

How can I hide the Android Navigation Bar in React Native?

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

I'm referring to the bar at the bottom of the screen that has the software back button and home button, not the component at the top of the page that comes with the Navigator Component.

android.com上的此页面解释了如何针对本机开发人员.有人可以解释如何通过React Native应用程序完成此工作吗?谢谢.

This page on android.com explains how to do it for native developers. Can someone explain how to accomplish this via React Native apps? Thanks.

推荐答案

如果您希望永久实现此目标，则必须在创建应用程序以及使其重新成为焦点时隐藏导航栏.

If you're looking to achieve this permanently you'll have to hide the Navbar when the app is created and when it comes back into focus.

为此，请将其添加到您的MainActivity.java:

To do so, add this in your 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标志:

You may want to make it "immersive" so that the user can still access the navigation bar by pulling from the bottom of the screen. To do so, add the View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag:

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

You can find more options on the android documentation.

这篇关于在React Native中隐藏Android导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！