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

问题描述

如何在 React Native 中隐藏

android.com 上的这个页面 解释了如何为本地开发人员.有人可以解释如何通过 React Native 应用程序来实现这一点吗?谢谢.

解决方案

如果您希望永久实现这一目标，则必须在创建应用程序和重新聚焦时隐藏导航栏.

为此，请在您的 MainActivity.java 中添加:

<代码>...导入 android.os.Bundle;导入 android.view.View;公共类 MainActivity 扩展了 ReactActivity {...@覆盖protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);隐藏导航栏()；}@覆盖public void onWindowFocusChanged(boolean hasFocus) {super.onWindowFocusChanged(hasFocus);如果(有焦点){隐藏导航栏()；}}私有无效 hideNavigationBar() {getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);}}

您可能希望使其身临其境"，以便用户仍然可以通过从屏幕底部拉动来访问导航栏.为此，请添加 View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY 标志:

<代码>...导入 android.os.Bundle;导入 android.view.View;公共类 MainActivity 扩展了 ReactActivity {...@覆盖protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);隐藏导航栏()；}@覆盖public void onWindowFocusChanged(boolean hasFocus) {super.onWindowFocusChanged(hasFocus);如果(有焦点){隐藏导航栏()；}}私有无效 hideNavigationBar() {getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION|View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);}}

您可以在 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.

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.

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

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

    }
}

You can find more options on the android documentation.

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