React Native IOS 状态栏背景答案

【问题标题】：React Native IOS Status Bar backgroundReact Native IOS 状态栏背景
【发布时间】：2019-06-18 13:29:15
【问题描述】：

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

【问题讨论】：

标签： ios react-native statusbar

【解决方案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;

参考这些备忘单

【讨论】：