如何在 React Native 的不同屏幕上显示或隐藏状态栏

Question

我是本机反应的新手，并试图创建一些我想在不同屏幕上显示或隐藏状态栏的应用程序。在主屏幕中，我不想显示状态栏，因为我已经设置了它的属性 @987654321 @ 但是这样做它在其他屏幕上也不可见，我怎样才能让它在其他屏幕上可见。

在Onboard 和Home 和屏幕中我想显示状态栏，在Login 和Register 屏幕中我不想显示状态栏。

下面是我的代码：

App.js

import React from 'react';
import {StatusBar} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Onboard from './components/Onboard';
import Login from './components/Login';
import Register from './components/Register';
import Home from './components/Home';

const Stack = createStackNavigator();

const App = () => {

return (
  <NavigationContainer>
   <StatusBar hidden={true}/>
    <Stack.Navigator>
     <Stack.Screen
       name="Onboard"
       component={Onboard}
       options={{ headerShown: false }} />
    <Stack.Screen
      name="Login"
      component={Login}
      options={{ headerShown: false }} />
    <Stack.Screen
      name="Register"
      component={Register} />
    <Stack.Screen
      name="Home"
      component={Home} 
      options={{ 
        headerLeft: null,
        headerTintColor:'white',
        headerStyle: {
          backgroundColor: '#e57373',
          elevation:0,
          shadowOpacity:0
       } }}/>  
    </Stack.Navigator>
  </NavigationContainer>
  );
};

export default App;

有人告诉我如何才能达到预期的效果。

Answer 1

如果你不想在每个屏幕上都放 StatusBar...，你也可以使用 react-navigation 的useFocusEffect hook。 https://reactnavigation.org/docs/use-focus-effect/

它更简洁易读。

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(() => {
  // This will run when component is `focused` or mounted.
  StatusBar.setHidden(true);

  // This will run when component is `blured` or unmounted.
  return () => {
    StatusBar.setHidden(false);
  }
});

Answer 2

componentDidMount() {
   StatusBar.setHidden(false);
}

将此代码添加到每个页面的类中。写 true 或 false 来显示和隐藏。