React Native IOS 状态栏背景

Posted 2023-04-18

【中文标题】React Native IOS 状态栏背景

【英文标题】：React Native IOS Status Bar background

【发布时间】：2019-06-18 13:29:15

【问题描述】：

由于将 backgroundColor 道具应用到 StatusBar 组件不会在 ios 上应用。我需要设置 SafeAreaView 的背景颜色以获得我想要的效果，它工作正常，但在 iPhone X 上它会在屏幕底部具有相同的颜色。我该如何解决这个问题？

【参考方案1】：

React-Native 在 iOS 平台上不支持 StatusBar 的背景颜色变化，但在 android 平台上是可以的 (https://facebook.github.io/react-native/docs/statusbar#backgroundcolor)。我为您的问题写了一个解决方法。您可以放心使用

import React, Component from "react";
import StyleSheet, StatusBar, View, Platform from "react-native";

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() 
    return (
        <View style=
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        >
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );


class App extends Component 
    render() 
        return (
            <View style=flex: 1>
                <StatusBarPlaceHolder/>
                ...YourContent
            </View>
        );
    


export default App;

对于 SafeAreaView：

import React, Component from "react";
import StyleSheet, StatusBar, View, Platform from "react-native";
import SafeAreaView from "react-native-safe-area-view";
//You can also use react-navigation package for SafeAreaView with forceInset.

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;

function StatusBarPlaceHolder() 
    return (
        <View style=
            width: "100%",
            height: STATUS_BAR_HEIGHT,
            backgroundColor: "blue"
        >
            <StatusBar
                barStyle="light-content"
            />
        </View>
    );


class App extends Component 
    render() 
        return (
            <SafeAreaView style=flex:1
                forceInset=top: 'never'>
                <StatusBarPlaceHolder/>
                ...YourContent
            </SafeAreaView>
        );
    


export default App;

【讨论】：

感谢您的回答，但您的代码有问题，我需要使用 SafeAreaView，以便在 iphone x 中调整一些布局。如果我将上面的视图更改为 SafeAreaView，则状态栏不适合。

我为 safeareaview 添加了另一种解决方案。如果您在项目中使用 react-navigation，则不需要新建包。只需从 react-navigation 导入 safeareaview

不客气。如果它有效，请给这个答案打绿色勾号。因为如果有人遇到类似的问题，他们可以尝试这个解决方案。祝你好运:)

谢谢，如果内容比屏幕尺寸短，这可以工作。但是，如果您必须滚动，状态栏背景会被隐藏。有办法解决吗？

【参考方案2】：

支持 iPhone X

除了 @sdkcy 的回答之外，对于 iPhone X，STATUS_BAR_HEIGHT 不能为 20。

我通过安装以下库解决了这个问题：

https://www.npmjs.com/package/react-native-status-bar-height

安装

npm install --save react-native-status-bar-height

导入

import  getStatusBarHeight  from 'react-native-status-bar-height';

并像这样更新 STATUS_BAR_HEIGHT：

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? getStatusBarHeight() : 0;

最后，我还把 Android 的高度改成了 0，因为它影响了 NavigationBar 的高度，但如果它对你来说效果很好，你可以保持不变。

希望这会有所帮助。

【参考方案3】：

iPhone X 使用 44pt 高状态栏

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 44 : 状态栏.currentHeight;

参考这些备忘单

IOS Design Guidelines IOS Cheat Sheet