如何在不改变应用程序屏幕位置的情况下隐藏状态栏

Question

我使用 React Native 来开发我的应用程序。我想全屏显示图像，但我的代码让我的应用程序的屏幕在状态栏隐藏时改变位置。

const myApp = () => {
  const [hiddenStatusBar, setHiddenStatusBar] = useState()
  const onClickImage = useCallback(() => {
    if (hiddenStatusBar) {
        setHiddenStatusBar(false)
    } else {
        setHiddenStatusBar(true)
    }
   }, [hiddenStatusBar])
  return(
    <View style={{ flex: 1 }}>
      <Pressable onPress={onClickImage}>
        <Image source={{ uri: item?.uri }}
          style={{ width: mobileWidth, height: mobileHeight }}
          contentFit="cover"
        />
      </Pressable>
      <StatusBar hidden={hiddenStatusBar} animated={true} />
    </View>
   )
  }

我想要什么：

但是我的代码输出：

有人可以帮帮我吗，谢谢！

Answer 1

1. top: hiddenStatusBar ? 0 : -StatusBarManager.HEIGHT,

   添加此行是为了即使状态栏隐藏时也保持图像长宽比恒定。
2. StatusBar 不应包装为子组件，因此将其移至代码顶部。

通过这两个保持图像比例的修复，两种状态相同，调整大小闪烁问题就被隐藏了。

      StyleSheet,
      Pressable,
      View,
      StatusBar,
      useWindowDimensions,
      ImageBackground,
      NativeModules,
    } from 'react-native';
    import { useCallback, useState } from 'react';
    
    const { StatusBarManager } = NativeModules;
    
    export default function App() {
      const { width, height } = useWindowDimensions();
      const [hiddenStatusBar, setHiddenStatusBar] = useState();
    
      const onClickImage = useCallback(() => {
        if (hiddenStatusBar) {
          setHiddenStatusBar(false);
        } else {
          setHiddenStatusBar(true);
        }
      }, [hiddenStatusBar]);
    
      return (
        <>
          <StatusBar hidden={hiddenStatusBar} animated={true} />
          <ImageBackground
            style={{
              position: 'absolute',
              top: hiddenStatusBar ? 0 : -StatusBarManager.HEIGHT,
              width,
              height,
            }}
            resizeMode="cover"
            source={{ uri: 'https://picsum.photos/seed/picsum/200/300' }}>
            <View style={{ flex: 1 }}>
              <Pressable
                style={{
                  flex: 1,
                  opacity: 0,
                }}
                onPress={onClickImage}
              />
            </View>
          </ImageBackground>
        </>
      );
    }