如何使用ionic-react让android应用程序全屏显示？

Question

我用ionic-react为android创建了一个应用程序。Ionic react使用电容器代替cordova。我不知道如何在我的ionic-react应用程序中使用cordova插件。有cordova和ionic原生插件android-full-screen，但我不知道如何在我的应用程序中使用它。

我会给你看我的App.tsx。我希望我的应用程序从开始就是全屏的，例如在componentDidMount上。请帮帮忙，我在找几天，但找不到解决这个问题的方法。谢谢。

import React, {Component} from 'react';
import {Redirect, Route} from 'react-router-dom';
import { Plugins } from '@capacitor/core';
import {
    IonApp,
    IonRouterOutlet,
} from '@ionic/react';
import {IonReactRouter} from '@ionic/react-router';
import ScenariosPage from './pages/ScenariosPage/ScenariosPage';
import ScenarioDetail from './pages/ScenarioDetail/ScenarioDetail';

import './css/common.css'
import '@ionic/react/css/core.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import './theme/variables.css';

export default class App extends Component {
    constructor(props: any) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        const { StatusBar } = Plugins;
        StatusBar.hide();
    }

    render() {
        return (
            <IonApp>
                <IonReactRouter>
                    <IonRouterOutlet>

                        <Route path="/scenarios" component={ScenariosPage} exact={true}/>
                        <Route path="/scenarios/:id" component={ScenarioDetail}/>
                        <Route exact path="/" render={() => <Redirect to="/scenarios"/>}/>
                    </IonRouterOutlet>
                </IonReactRouter>
            </IonApp>
        )
    }
};

Answer 1

如果你想要应用程序从一开始就全屏，并且根本不需要在JS中切换，那么只需要在android端进行切换，而不需要任何cordova插件。尝试将其放入MainActivity.java文件的onCreate方法中。这是取自全屏https://developer.android.com/training/system-ui/immersive上的android文档。

// Enables regular immersive mode.
// For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
// Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(
  View.SYSTEM_UI_FLAG_IMMERSIVE
  // Set the content to appear under the system bars so that the
  // content doesn't resize when the system bars hide and show.
  | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
  | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
  | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
  // Hide the nav bar and status bar
  | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
  | View.SYSTEM_UI_FLAG_FULLSCREEN);

Answer 2

所以首先！你不需要操作MainActivity.java，如果你这样做，你的离子应用程序将会死亡……

但是有一个很棒的小Cordova plugin，它允许您像在JAVA中一样做同样的事情

在你安装了这个插件之后，你将需要2个额外的包(ionic-native/core和rxjs) (如果你不安装它们，你的应用程序将无法启动)

npm install @ionic-native/core
npm install rxjs

成功安装后，您可以简单地将这些代码行添加到您的App.tsx或任何其他页面或组件中，以使其具有沉浸式的全屏效果。

从“@ionic-native/android-full-screen”导入{AndroidFullScreen，AndroidSystemUiFlags}；

const AFS = async () => 
{
//Check if is immersive supported for instance
await AndroidFullScreen.isImmersiveModeSupported().then((r: any) => {
        console.log(r);
    });
//Set display with AndroidSystemUiFlags
//in my case to full screen but there is a ton of options
//As the android documentation shows if u want a fullscreen app you should use three
//flags Immersive, Fullscreen, HideNavigation
await AndroidFullScreen.setSystemUiVisibility(AndroidSystemUiFlags.Fullscreen)
//example how to set a flag
}

AndroidSystemUiFlag选项：

​

您还可以根据自己的需要设置一系列其他选项：

​

设置好所需内容后，只需使用以下命令将应用程序启动到模拟器或物理设备中：

ionic capacitor run

带有fullscreen标志的结果：

​

​

它在Pixel2，3，3a，4上测试正常，也可以在三星galaxy A51上使用

Answer 3

因此，有几个选项可以做到这一点。首先，我在几个小时前发布的内容之后，我注意到，如果你没有使用沉浸式粘滞，你应该写一个处理程序来设置标志(基于VIDEO OF FLAGS)

然后我开始研究一个更好的解决方案。我发现了什么。

我们需要来自Ionic的三个插件

1. @capacitor/status-bar
2. @cordova/navigation-bar

在跳到实现之前，请正确安装Capacitor和Cordova插件：

npm install rxjs
npm install @ionic-native/core
npm install @capacitor/status-bar
npm install cordova-plugin-navigationbar
npm install @ionic-native/navigation-bar

npx capacitor sync

[1. HIDE NAVIGATION AND STATUS BAR]

因此，如果我们已经安装了所需的插件，我们可以编写简单的几行代码。

/*This will be triggered when the component renders*/
import {StatusBar} from "@capacitor/status-bar";
import {NavigationBar} from '@ionic-native/navigation-bar';

export default class YOUR CLASS extends Component {
componentDidMount() {
        StatusBar.hide().then(r => ANY_CALLBACK);
        NavigationBar.hideNavigationBar().then(r => ANY_CALLBACK);
        }
}

正如你所希望的，你可以在你的App.tsx中做到这一点

import {StatusBar} from "@capacitor/status-bar";
import {NavigationBar} from '@ionic-native/navigation-bar';

//Simple function that has been called when the app load
function HideThings(){
        StatusBar.hide().then(r => ANY_CALLBACK);
        NavigationBar.hideNavigationBar().then(r => ANY_CALLBACK);
}

const App: React.FC = () => (
    <IonApp onLoad={HideThings}>
        <IonReactRouter>
...

结果：

​

​

如果您想要在边框到边框的显示屏上显示，如三星Galaxy A51或任何较新的手机，您必须设置您的应用程序，如1.隐藏导航和状态栏

然后您应该转到

android/app/src/main/values

在这里，您需要复制styles.xml，创建一个名为values-v28的文件夹

android/app/src/main/values-v28

将styles.xml粘贴到values-v28，然后在<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">中添加一个新项，如下所示

 <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

之后，您就完成了所有设置，您的应用程序将呈现在状态栏下。

Cordova/Capacitor插件只适用于react和angular ( Cordova插件不支持Vue)边缘到边缘显示应该可以在其他安卓应用程序中很好地工作，您只需将其放在正确的位置READ MORE