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

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

static navigationOptions = {
    header: null
}

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

Answer 3

删除方法有以下三种：

第一种方法

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

方法

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

您在代码中使用的方法

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

TabNavigator - 隐藏状态栏

TabNavigator - Hide status bar

react-native

react-navigation