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

Question

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

在欢迎屏幕中，输入 react-native的StatusBar hidden 的组件 Prop 设置为 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 (世博 SDK 34 fork )

react-navigation@3.11.1

世博 SDK 34

Answer 1

这应该可以解决问题:
代替

<StatusBar hidden={true} />

和

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