React Native IOS状态栏背景

发布时间：2020-12-15 20:30:51 所属栏目：百科来源：网络整理

导读：由于将backgroundColor props应用于StatusBar组件,因此未在 IOS上应用.我需要设置SafeAreaView的背景颜色以获得我想要的效果,它工作正常但在iPhone X上它将在屏幕底部具有相同的颜色.我该如何解决这个问题？解决方法 React-Native不支持iOS平台上StatusBar

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

enter image description here

解决方法

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,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%",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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!