如何消除本机元素标题上方的大空白

Question

我一直在尝试使用v5的堆栈导航以及对本机元素进行响应。

我已经用react native elements标头替换了默认的堆栈导航标头。导航项上方有一个很大的空间。如何摆脱蓝色空间（蓝色空间下方的图像）？我看了看文档，堆栈溢出并尝试了其他方法来摆脱空白。我该怎么办？

即使默认的堆栈导航标题也没有太多的空白空间。我在下面放置了代码以重现我所看到的内容。我正在三星Galaxy s10 +中尝试]

我已经尝试过诸如居中，调整高度之类的操作，但是没有外观。我在下面添加了示例代码，以便能够重现该问题

我附上了截图的打击。您可以看到标题项目没有居中，并且标题项目上方有一个巨大的蓝色空间。

我已经尝试使用谷歌搜索，但是没有找到如上所示没有很大差距的解决方案的运气。到目前为止，这是我的代码：

// HomeScreen.js
import React from "react";
import { View, Text, StyleSheet } from "react-native";

const Home = () => {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Home;

// App.js
import React from "react";
import { Header } from "react-native-elements";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";

import Home from "./src/screens/Home";

const HomeScreen = ({ navigation }) => {
const HomeScreen = ({ navigation }) => {
  return (
    <Stack.Navigator
      headerMode="screen"
      screenOptions={‌{
        header: () => (
          <Header
            leftComponent={‌{
              icon: "menu",
              color: "#fff",
              onPress: () => navigation.openDrawer(),
            }}
            centerComponent={‌{ text: "MY TITLE", style: { color: "#fff" } }}
            rightComponent={‌{ icon: "home", color: "#fff" }}
          />
        ),
        headerStyle: {
          alignItems: "center",
          justifyContent: "center",
          flex: 1,
        },
      }}
    >
      <Stack.Screen name="Home" component={Home} />
    </Stack.Navigator>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;

这是用户界面的外观

Answer 1

我认为您的App.js文件中有重复的const HomeScreen = ({ navigation }) => {，可能是导致问题的原因。