如何通过离子反应使Android应用全屏显示？

Question

我使用ionic-react为Android创建了一个应用。离子反应使用电容器代替Cordova。我不了解如何在我的离子反应应用程序中使用cordova插件。有codova和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插件。尝试将其放在onCreate文件的MainActivity.java方法中。这取自全屏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);