React Native IOS状态栏背景 [英] React Native IOS Status Bar background
问题描述
因为将backgroundColor道具应用于StatusBar组件未在IOS上应用.我需要设置SafeAreaView的背景颜色以获得我想要的效果,它可以正常工作,但在iPhone X上,它在屏幕底部将具有相同的颜色.我该如何解决这个问题?
Since Applying the backgroundColor props to StatusBar component doesn't get applied On IOS. I need to set the background colour of SafeAreaView to get the effect i want, it works fine but on iPhone X it will have that same colour at the bottom of the screen. How can I solve this issue?
推荐答案
React-Native在iOS平台上不支持StatusBar的背景颜色更改,但在Android平台上则可以(
React-Native does not support background color change of StatusBar on iOS platform but on Android platform, it's ok (https://facebook.github.io/react-native/docs/statusbar#backgroundcolor). I wrote a work around for your problem. You can use it safely
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;
这篇关于React Native IOS状态栏背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!