React Native 沉浸模式答案

【问题标题】：React Native immersions modeReact Native 沉浸模式
【发布时间】：2018-04-06 08:18:25
【问题描述】：

我想向我的 React Native 应用程序添加沉浸式模式（全屏，没有屏幕导航栏）。在最好的情况下，我只会在以横向模式查看应用程序时拥有它。这样用户就可以真正全屏观看视频。

所以我把它添加到我的 mainactivity.java 中

    @Override
    protected void onStart()
    {
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN
                | View.SYSTEM_UI_FLAG_IMMERSIVE);
        super.onStart();
    }

视图导入自：

import android.view.View;

当应用“启动”时，您会看到白色的加载屏幕一秒钟。在那个屏幕上，我看到了沉浸式模式。但是当 React Native 应用程序启动时，它会回来。

有人知道怎么做吗？

【问题讨论】：

标签： android reactjs react-native react-native-android android-immersive

【解决方案1】：

开箱即用，您唯一的选择是隐藏或显示状态栏 - with navigation 或手动：

import {StatusBar} from "react-native";

componentDidMount() {
    StatusBar.setHidden(true, "fade");
}

真正的沉浸式模式可以通过额外的模块来实现，例如 - react-native-immersive。

【讨论】：

【解决方案2】：

我创建了一个包含沉浸式模式、stickyImmersive 模式等的包。

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

【讨论】：