Как сделать Android-приложение полноэкранным с ionic-реагировать? - PullRequest
Новая
       79

Как сделать Android-приложение полноэкранным с ionic-реагировать?

0 голосов
/ 29 октября 2019

Я создал приложение для android с ionic-реагировать. Ионные реакции используют конденсатор вместо кордова. Я не понимаю, как использовать плагины Cordova с моим приложением ионной реакции. Есть кордова и родной плагин ionic android-полноэкранный, но я не понимаю, как использовать его в моем приложении.

Я покажу вам свой 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>
        )
    }
};

1 Ответ

0 голосов
/ 29 октября 2019

Если вы хотите, чтобы приложение работало в полноэкранном режиме с самого начала, и вообще не нужно переключать его в JS, просто сделайте это на стороне Android без необходимости в плагине Cordova. Попробуйте поместить это в метод onCreate в файле MainActivity.java. Это взято из Android документов на весь экран https://developer.android.com/training/system-ui/immersive

// 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);
...