javascript - React Native Navigation (6.3.2) - 如何在 Android 中完全隐藏顶部状态栏(见屏幕截图)

Question

我正在尝试使用 react-native-navigation 构建一个新的 react-native 应用程序。早些时候我们有一个使用 v2.x 的 react-native-navigation 的应用程序，我能够正确地使用导航，其中 notch 和 statusBar 被导航正确处理。但是对于 6.x 版我无法隐藏状态栏，或者你可以说在状态栏后面绘制。请参阅下面的旧应用和新应用的屏幕截图。

这是来自 MainActivity 的代码 fragment (在两个应用程序(旧的和新的)中都相同)。

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);
    }
}

索引.js

/**
 * @format
 */

import App from './App';

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',
      },
    },
  });
});

欢迎.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 };

带 Notch 的设备(新应用)RNN v6.x

带 Notch 的设备(旧应用程序)RNN v2.x

没有 Notch 的设备(新应用)RNN v6.x

没有 Notch 的设备(旧应用程序)RNN v6.x

请帮助我了解这两个版本在布局处理方面的变化以及我如何实现，以及我使用旧版本的 react-native-navigation 能够实现什么。

Answer 1

根据 React Navigation v6 docs如果您使用的是标签导航器，您可以使用 FocusAwareStatusBar 隐藏状态栏

function FocusAwareStatusBar(props) {
  const isFocused = useIsFocused();

  return isFocused ? <StatusBar {...props} /> : null;
}