选项卡导航器 - 隐藏状态栏

Question

我正在使用反应原生和反应导航。

我想隐藏状态栏。但它要么仍然可见，要么它没有按照我试图隐藏它的方式工作。

第一次尝试会导致完全白屏。好像导航器甚至没有加载。第二次尝试也是如此。最后一次尝试正在工作，我有我想要的东西，但显示状态栏。我想把它藏起来。

我在网络上找到的示例使用与我第二次尝试相同的语法。我不明白为什么我的不起作用..

import React from 'react';
import { StyleSheet, StatusBar, View } from 'react-native';
import { TabNavigator } from 'react-navigation';
import PageLecture from './js/PageLecture';
import PageSalat from './js/PageSalat';
import PageHadiths from './js/PageHadiths';
import PageParametres from './js/PageParametres';
export default class App extends React.Component {
    render() {
        // This is not working
        // return (
        //     <View>
        //         <View>
        //             <StatusBar hidden={true}/>
        //         </View>
        //
        //         <ReactCoran />
        //     </View>
        // );
        // This is not working
        // return (
        //     <View>
        //         <StatusBar hidden={true}/>
        //         <ReactCoran />
        //     </View>
        // );
        // This is working but status bar is displayed
        return (
            <ReactCoran />
        );
    }
}

const ReactCoran = TabNavigator({
    Lecture: {
        screen: PageLecture,
    },
    Salat: {
        screen: PageSalat,
    },
    Hadith: {
        screen: PageHadiths,
    },
    Parametres: {
        screen: PageParametres,
    }
},
{
    tabBarPosition: 'bottom',
    animationEnabled: false,
    tabBarOptions: {
        allowFontScaling: true,
        activeTintColor: '#000000',
        showIcon: true,
        showLabel: false,
        activeBackgroundColor: '#ff0000',
        style: {
            backgroundColor: '#aa0000',
        },
        indicatorStyle: {
            height:2,
            backgroundColor: '#ffffff',
        }
    },
});

谢谢

Answer 1

我不知道

ReactCoran是如何实现的，但这通常有效：

将style={{flex: 1}}添加到父视图

import { StatusBar } from 'react-native'
<View style={{flex: 1}}>
    <StatusBar hidden={true}/>
    <ReactCoran />
</View>

让我知道这是否有帮助。如果没有向我们显示ReactCoran代码.

Answer 2

有以下三种方法可以删除：

1. 第一种方法

   <Stack.Navigator
   initialRouteName="HomeActivity"
   screenOptions={{headerShown: false}}
   >
   <Stack.Screen>
   .......
   </Stack.Screen>
   </Stack.Navigator>
   

2. 方法

   React.useLayoutEffect(() => {
   navigation.setOptions({headerShown: false});
    }, [navigation]);
   

3. 在代码中使用的方法

如果它不起作用，请提供更多细节，因为如果您不想使用状态栏，那么您可以简单地选择第一种方法是没有用的。

Answer 3

在反应导航中，可以通过添加以下内容来隐藏状态栏：

static navigationOptions = {
    header: null
}

到组件。更多信息在这里： https://reactnavigation.org/docs/stack-navigator.html#navigationoptions-used-by-stacknavigator