TabNavigator - 隐藏状态栏

Question

我正在使用 react-native 和 react-navigation。

我想隐藏状态栏。但它要么保持可见，要么不像我试图隐藏它的方式那样工作。

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

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

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

在 react-navigation 中，可以通过添加隐藏状态栏：

static navigationOptions = {
    header: null
}

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