时间戳

首页 > 解决方案 > 来自堆栈导航的隐藏标题转到状态栏

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

问题描述

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

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

        }
    }

在Home的这个内容之后，这是 View 中的一个简单文本，转到状态栏。 在此处输入图像描述 我认为这只是 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);

主页.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状态栏的空间。

标签： javascriptcssreactjsreact-nativereact-navigation

解决方案

你可以试试

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

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

推荐阅读