Expo React Native App 中的隐藏状态栏留下空白

Question

在我们的 Expo React Native 应用程序中，状态栏当前显示在所有应用程序的屏幕上。 但是，一屏欢迎需要隐藏状态栏。

在欢迎屏幕中，放入react-native的StatusBar组件，将hidden props 设置为true隐藏状态栏（在物理 iPhone 上），但会留下一个白色区域。

问题：以前状态栏所在的白色区域应该是透明的或被移除以显示覆盖屏幕其余部分的背景图像。

我们怎样才能做到这一点？

隐藏之前

躲起来之后

注意：Stack Overflow 的白色背景上很难看到白色区域

路由/index.js

import { createStackNavigator, createSwitchNavigation } from 'react-navigation';

...

const AuthStack = createStackNavigator({
    Welcome: WelcomeScreen,
    Login: LoginScreen,
}, {
    headerMode: 'none',
})

...

欢迎.js

import React, { Component } from 'react';
import { View, ImageBackground, StatusBar } from 'react-native';
import { SafeAreaView } from 'react-navigation';

export class WelcomeScreen extends Component {

    render() {
        return (
            <View>
                <StatusBar hidden={true} />
                <SafeAreaView style={{height: '100%'}}>
                    <Layout style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                        <ImageBackground source={myBackgroundImage} style={{width: '100%', height: '100%'}}>

...

使用

• react@16.8.3
• react-native@0.59.8 (Expo SDK 34 fork)
• react-navigation@3.11.1
• 世博SDK 34

Answer 1

您可以使用样式的flex

用于直接查看的示例 示例链接

import React, { Component } from 'react';
import { StyleSheet, View, Text, StatusBar, Platform,SafeAreaView } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.MainContainer}>
        <StatusBar
          barStyle="dark-content"
          // dark-content, light-content and default
          hidden={true}
          //To hide statusBar
          backgroundColor="#00BCD4"
        />
        <Text> Status Bar Example </Text>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
    backgroundColor:"red"
  },
});

Answer 2

这可能是一个老问题，但对于那些仍在谷歌搜索的人来说！

将<SafeAreaView>更改为<View>或任何其他 Surface。 SafeAreaView仍然计算 StatusBar 的高度（即使它是隐藏的），并将 TopMargin 应用于普通视图。

Answer 3

这应该可以解决问题：

代替

<StatusBar hidden={true} />

和

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