使用 statusBarTranslucent

Question

Screenshot of status bar

我想在显示模态窗口时隐藏状态栏。

我的设置如下，但无法按预期工作：

<StatusBar animated={true} hidden={true}  translucent={true}>

Answer 1

这是一个已知问题，似乎还没有官方/反应方式来修复它。您可以在此处进行讨论：

https://github.com/facebook/react-native/issues/7474

我在本次讨论中看到一篇文章提出了一个隐藏它的黑客攻击，但我还没有尝试过我的项目。如果它适合你，你也可以赞成这个技巧。

<View style={styles.outerContainer}
  <View style={styles.container}>
    <StatusBar hidden={true}/>
    <View style={styles.content}>
  </View>
  <Modal animation={fade} transparent={true}>
          {/*Modal Contents Here*/}
  </Modal>
</View>

更加可靠的修复可能正在改变原生android代码中的活动主题。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
        <!-- Customize your theme here. -->
    </style>
    <style name="AppTheme.Launcher">
        <item name="android:windowBackground">@drawable/launch_screen</item>
    </style>
</resources>

致信 Traviskn 和 mbashiq ，他们提出了上述修正案。我建议您订阅issue。

Answer 2

我们可以使用StatusBar的背景来轻松解决此问题，但这可能不是最好的。

<Modal transparent>
    {Platform.OS === 'android' ?
         <StatusBar backgroundColor="rgba(0,0,0,0.5)"/>
         : null
    }
    <View style={{backgroundColor: 'rgba(0,0,0,0.5)'}}>
        // ModalContent here
    </View>
</Modal>

只需使用相同的背景即可解决此问题。

Answer 3

一段时间以来，我实际上面临着相同的问题，我尝试了许多解决方案，但并没有摆脱这个问题。我还尝试使用本机Android代码为单个组件隐藏StatusBar，使其在其他组件中有效，但是当我在模式中使用它时，它就无法正常工作。因此，最后，我得到了一个适合我的解决方案。我删除了模式视图，并用react-navigation替换了它，以导航到特定路径并使用BackHandler组件处理后退按钮。

Answer 4

我通过使用模式道具创建自定义状态栏组件来实现这一目标：

import React from 'react'
import { StatusBar } from 'react-native'

const MyStatusBar = (props) => {

    const { backgroundColor } = props
    const { barStyle } = props
    const { translucent } = props
    const { hidden } = props
    const { showHideTransition } = props
    const { modal } = props;

    (modal !== undefined) ? StatusBar.setHidden(true) : StatusBar.setHidden(false)

    return (
        <StatusBar showHideTransition={showHideTransition} hidden={hidden} translucent={translucent} backgroundColor={backgroundColor} barStyle={barStyle} />
    )
}
export default MyStatusBar

我的基本组件modal道具内部未定义，因此显示了自定义状态栏：

<MyStatusBar backgroundColor={theme.colors.primary} barStyle={'light-content'} />

，然后在调用模式的组件内部调用：

<MyStatusBar modal={modalVisible ? true : undefined} />

Answer 5

我认为我的问题的根源是相同的，但看起来与上面描述的方式略有不同。

预期行为：当 Modal 可见时，StatusBar 应该隐藏。

const [showModal, setShowModal] = useState(false)

...

<Modal
  visible={showModal}
>
  <StatusBar hidden={showModal} />
...

实际行为：有时 StatusBar 会按预期消失，有时只是 StatusBar 背景颜色消失而实际状态栏仍然存在。

解决方法：由于闪烁行为，我认为问题是原生 Android 对话框的竞争条件。因此，我构建了一个自定义 Modal 组件，该组件使用 StatusBar imperative api 来确保在 Modal 出现之前进行 StatusBar 隐藏调用。到目前为止，问题没有再次出现。

这是自定义的 Modal 组件：

const Modal = ({ visible, children, ...rest }) => {
  const [modalVisibility, setModalVisibility] = useState(false);

  useEffect(() => {
    if (visible) {
      StatusBar.setHidden(true);
      setModalVisibility(true);
    } else {
      StatusBar.setHidden(false);
      setModalVisibility(false);
    }
  }, [visible]);

  return (
    <RNModal
      visible={modalVisibility}
      {...rest}
    >
      {children}
    </RNModal>
  );
};

export default Modal;

Answer 6

使用 statusBarTranslucent

如果您的状态栏是半透明的，您可以将其设置为模态。

statusBarTranslucent 属性已添加到 RN 0.62 的 Modal 中

<Modal ... statusBarTranslucent>...</Modal>

信用：https://github.com/react-native-modal/react-native-modal/issues/50#issuecomment-607535322

Answer 7

你好，你可以试试这个

<View style={styles.outerContainer}
      <View style={styles.container}>
        <StatusBar hidden={true}/>
        <View style={styles.content}>
      </View>
      <Modal animation={fade} transparent={true}>
              {/* Contents Here*/}
      </Modal>
    </View>

Answer 8

根据文档，您应该可以使用此

在iOS和Android中隐藏状态栏

import {StatusBar} from 'react-native';
StatusBar.setHidden(true);

Answer 9

<StatusBar backgroundColor={'transparent'} translucent={true} />

当react-native模式显示时，如何隐藏statusBar？

9 个答案:

使用 statusBarTranslucent