Question

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

Answer 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;

Answer 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的高度，但是如果对您来说效果很好，您可以将其保持不变。

希望这会有所帮助。

Answer 3

iPhone X使用 44pt 高状态栏

const STATUS_BAR_HEIGHT = Platform.OS ==='ios'吗？ 44：StatusBar.currentHeight;

请参阅这些备忘单

React Native IOS状态栏背景

3 个答案: