React Native Navigation (6.3.2) - Как полностью скрыть верхнюю строку состояния в Android (см. Скриншот) - PullRequest
Новая
       45

React Native Navigation (6.3.2) - Как полностью скрыть верхнюю строку состояния в Android (см. Скриншот)

1 голос
/ 27 марта 2020

Я пытаюсь создать новое реагировать-родное приложение, используя реагировать-родное-навигация . ранее у нас было приложение, которое использует v2.x для response-native-navigation, и я могу правильно работать с навигацией, где отметка и statusBar правильно обрабатывались навигацией. Но с версией 6.xi я не могу скрыть статус-бар, или вы можете сказать, что рисует за статус-бар. См. Скриншот ниже со старым и новым приложением.

Здесь приведен фрагмент кода из MainActivity (одинаковый для обоих приложений (старого и нового)). 

public class MainActivity extends NavigationActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
            layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
            getWindow().setAttributes(layoutParams);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
        super.onCreate(savedInstanceState);
    }
}

index. js

/**
 * @format
 */

import App from './App';

Приложение. js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import { Navigation } from 'react-native-navigation';
import { WelcomePage } from './src/screens/welcome.page';
import { StatusBar } from 'react-native';

Navigation.registerComponent(`Pages.WelcomePage`, () => WelcomePage);

StatusBar.setHidden(true);

Navigation.events().registerAppLaunchedListener(async () => {

  Navigation.setDefaultOptions({
    popGesture: false,
    topBar: {
      topMargin: 0,
      visible: false,
      drawBehind: true,
      animate: false,
      height: 0
    },
    layout: {
      orientation: 'portrait',
      backgroundColor: 'white',
      componentBackgroundColor: 'white',
      fitSystemWindows: true,
      topMargin: 0,
    },
    statusBar: {
      drawBehind: true,
      visible: false,
      backgroundColor: 'transparent',
      style: 'light'
    },
  });

  return Navigation.setRoot({
    root: {
      component: {
        name: 'Pages.WelcomePage',
      },
    },
  });
});

welcome.page. js

import React, { Component } from 'react';
import { StatusBar, Text, View } from 'react-native';

class WelcomePage extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <StatusBar hidden={true}/>
        <View style={{backgroundColor: '#556677', justifyContent: 'center', alignItems: 'center', flex: 1}}>
          <Text>Hello World</Text>
        </View>
      </>
    );
  }
}

export { WelcomePage };

Устройство с выемкой (новое приложение) RNN v6. x

screen with notch

Устройство с выемкой (старое применение) RNN v2.x

screen with notch old app

Устройство без надреза (новое приложение) RNN v6.x

enter image description here

Устройство без надреза (старое приложение) RNN v6.x

enter image description here

Пожалуйста, помогите мне понять, что изменилось между этими двумя версиями с точки зрения обработки макетов и как я могу достичь, чего я смог достичь с помощью старой версии реакции-нативной навигации.

...