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

Question

当显示模态窗口时,我想隐藏状态栏.

我的设置如下,但它不会按预期工作:

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

Answer 1

使用statusBar半透明

如果你的状态栏是translucent，你可以设置statusBarTranslucent为modal。

自添加以来React Native 0.62

<Modal {...props} statusBarTranslucent>...</Modal>

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

Answer 2

这是一个已知问题,似乎还没有官方/反应方法来修复它.你可以在这里讨论:

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,他们提出了上面的补救措施.我建议你订阅那个问题.