如何制作全屏离子电容器应用程序？

Question

电容器在文档中有关于屏幕定位(https://capacitorjs.com/docs/v2/guides/screen-orientation#screen-orientation-in-your-capacitor-app)的教程，但是如何切换应用程序到全屏呢？科多瓦在config.xml中有内置的设置，但在电容器中我不知道怎么做。

Answer 1

我猜你想隐藏状态栏。在这种情况下，您可以使用官方电容状态栏插件来隐藏状态栏。见https://capacitorjs.com/docs/apis/status-bar#hide。

import { StatusBar } from '@capacitor/status-bar';

const hideStatusBar = async () => {
  await StatusBar.hide();
};

Answer 2

使用Cordova公司的全屏插件 (仍在使用电容器)

npm install cordova-plugin-fullscreen
npm install @awesome-cordova-plugins/android-full-screen
ionic cap sync

然后在你的App.tsx

AndroidFullScreen.isImmersiveModeSupported()
  .then(() => AndroidFullScreen.immersiveMode())
  .catch(console.warn);

在你的手机上试试

ionic cap run android --external -livereload

这将同时隐藏状态栏和导航按钮。如果用户滑动到状态栏所在的位置，它将平稳地显示它2秒。