React Native Android 状态栏和标题之间的空白

Question

我创建了一个 react-native 应用程序。使用 react-navigation/native 进行导航。我的 android 屏幕在应用程序标题和 android 状态栏之间有一个空白区域。我在那里什么也做不了。我试过检查，但没有什么可检查的。

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

为什么我的标题和状态栏之间有很大的空白？

感谢您的帮助。

Answer 1

我确实安装了两个不同的导航包。删除了一个并且可以工作。