堆栈导航中隐藏的标题转到状态栏

Question

我是React-nativ的新手。而且我无法解决问题。当我尝试隐藏堆栈导航器标题并使用：

 Home :{
        screen: Home,
        navigationOptions: {
            headerShown: false,
            title: 'NO TITLE'

        }
    }

，然后在 Home 的此内容之后，这是View内的简单文本，转到状态栏。 我认为这只是CSS问题，但我不知道它如何解决。我在下面附上我的代码。

App.js：

import 'react-native-gesture-handler';
import * as React from 'react';
//import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet, Text, View } from 'react-native';
import Navigator from './routes/homeStack'

export default function App() {
  return (

    <Navigator />
  );
}

homeStack.js：

import {createStackNavigator} from 'react-navigation-stack'
import {createAppContainer} from 'react-navigation'
import Home from '../components/Home'
import ReviewDetails from '../components/ReviewDetails'

const screens = {
    Home :{
        screen: Home,
        navigationOptions: {
            headerShown: false,
            title: 'NO TITLE'

        }
    },
    ReviewDetails :{
        screen: ReviewDetails
    }

}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

Home.js：

import React,{useState} from 'react';
import { TextInput, View, Button, Text } from 'react-native' 

const Home = props => {

    const [enteredGoal,setEnteredGoal] = useState('');

    const  goalInputHandler = (enteredText) => {
        setEnteredGoal(enteredText);
    }

    return(
        <View >
            <Text>HOME PAGE</Text>
        </View>
    )
}



export default Home;

我知道解决此问题的方法是在内容中添加填充，但对我来说，此修补程序不是错误修正。对于应用程序怎么说，请不要使用Android状态栏的空间。

Answer 1

您可以尝试

let HomeStack=createStackNavigator(
    {
        Home:Home
    },
    {
        initialRouteName:'Home',
        headerMode:'none'
    })

其中headerMode：'none'是您要寻找的

Answer 2

在组件中使用SafeAreaView。