React Native Android 状态栏和 Header 之间空白 Space

Question

我已经创建了一个 react-native application.Using react-navigation/native 用于导航。我的 android 屏幕在应用程序 header 和 android 状态栏之间有一个空白 space。我在那里什么也做不了。我试过检查，但没有什么可检查的。

App.js

import { NavigationContainer } from '@react-navigation/native';
import React, { useContext } from 'react';
import { HomePage } from './pages';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
export default App = () => {
const Stack = createNativeStackNavigator();
return (
    <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomePage}></Stack.Screen>
          </Stack.Navigator>
    </NavigationContainer>
 );
};

index.js

import App from './src/App';
import { Navigation } from "react-native-navigation";

Navigation.registerComponent('com.app.MyApp', () => App);
Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setRoot({
        root: {
            stack: {
                children: [
                    {
                        component: {
                            name: 'com.app.MyApp'
                        }
                    }
                ]
            }
        }
    });
});

You can see the output here

为什么我的header和状态栏之间有一个巨大的空白space？

感谢您的帮助。

Answer 1

我确实安装了两个不同的导航包。删除了一个并且有效。

React Native Android 状态栏和 Header 之间空白 Space

React Native Android Blank Space Between Status Bar And Header

android

react-native

react-navigation

react-native-navigation