React Native Fullscreen

Question

我正在尝试创建一个简单的反应本机应用程序。我需要以全屏模式运行应用程序。有没有办法做到这一点？

我需要删除/隐藏底部按钮。 我正在为Android设备执行此操作。

|---------------|
|               |
|    screen     |
|               |
-----------------
|  <|   O  [ ]  |     <--- I need to remove these buttons!
-----------------

Answer 1

React Native没有提供直接隐藏Android导航栏的方法，您必须创建使用Android 4.4中引入的native module的Android Immersive mode或使用现有模块做到这一点，我发现只有一个：react-native-full-screen

Answer 2

在项目的Android清单文件中，选择fullScreen活动。

Answer 3

如果您在项目上使用Expo，则只需将以下内容添加到app.json文件中：

{
  "expo": {
    ...
    "androidNavigationBar": {
      "visible": "immersive"
    }
    ...
  }
}

app.json文件是您配置应用程序中不属于代码的部分的理想选择。它位于package.json旁边的项目的根目录。有关app.json文件的更多信息，请访问此处： https://docs.expo.io/workflow/configuration/

androidNavigationBar是Android底部导航栏的配置。将其设置为immersive会导致导航栏被隐藏，直到用户从隐藏导航栏的边缘向上滑动为止。有关androidNavigationBar选项的更多信息，请访问此处：https://docs.expo.io/versions/latest/config/app/#androidnavigationbar

Answer 4

我创建了一个包含全屏和更多功能的包。

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