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

Posted 2023-05-07

【中文标题】React Native Android 状态栏和标题之间的空白

【英文标题】：React Native Android Blank Space Between Status Bar And Header

【发布时间】：2021-10-24 04:14:29

【问题描述】：

我创建了一个 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

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

感谢您的帮助。

【问题讨论】：

你为什么使用两个不同的导航库？它可能会导致这个问题。

坚持react-navigation/..，摆脱react-native-navigation。您不需要那个 index.js 代码。通常 index.js 只包含AppRegistry.registerComponent(appName, () => App)

我为什么要安装两个导航包 :( 感谢您的帮助。愚蠢的问题要问。

【参考方案1】：

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