来自堆栈导航的隐藏标题转到状态栏答案

【问题标题】：Hidden header from stack-navigation go to statusbar来自堆栈导航的隐藏标题转到状态栏
【发布时间】：2020-04-10 23:13:02
【问题描述】：

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

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

        }
    }

在Home的这个内容之后，这是一个简单的文本在视图中进入状态栏。我认为这只是 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;

我知道这个问题的解决方法是在内容中添加一个填充，但对我来说它是修复而不是错误修复。怎么说app不要使用Android状态栏的空间。

【问题讨论】：

标签： javascript css reactjs react-native react-navigation

【解决方案1】：

你可以试试

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

其中 headerMode:'none' 是您要查找的内容

【讨论】：

就像我的变体一样工作。问题是状态栏中显示的内容。看起来应用程序的内容没有为屏幕顶部的状态栏保留空间。
我认为您的问题出在 Home 组件中，您可以展示一下吗
使用 SafeAreaView（来自 react-native 模块）而不是 View

【解决方案2】：

在组件中使用 SafeAreaView。

【讨论】：