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

Question

我是新来反应本机并尝试创建一些应用程序，我想在不同的屏幕上显示或隐藏状态栏。在主屏幕中，我不想显示状态栏，因为我已经设置了它的属性，hidden={true}但在这样做时在其他屏幕上也不可见，如何使其在其他屏幕上可见。

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

下面是我的代码：

应用程序.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... ，你也可以使用useFocusEffectReact-navigation 的钩子。https://reactnavigation.org/docs/use-focus-effect/

它更干净且易于阅读。

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

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

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