Скрытый заголовок из стека-навигации go в строке состояния

Question

Я новичок в React-натив. И я не могу решить проблему. Когда я пытался скрыть заголовок стека-навигатора и использовать:

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

        }
    }

и после этого содержимое Home , которое представляет собой простой текст внутри View go в строке состояния. Я думаю, что это только CSS проблема, но я не понимаю, как это исправить. Я прилагаю свой код ниже.

Приложение. 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

Использовать SafeAreaView в компоненте.

Answer 2

вы можете попробовать

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

где headerMode: 'none' - это то, что вы ищете