Expo React Native 应用程序中的隐藏状态栏留下空白

Question

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

在欢迎屏幕中，放入react-nativesStatusBar组件并hidden设置为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 分叉）
• react-navigation@3.11.1
• 世博 SDK 34

Answer 1

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

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