在 iOS 平台上,React-Native 不支持更改 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;
支持iPhone X
除了@sdkcy的回答外,对于,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;
最后,我还将安卓设备的高度更改为0,因为这会影响NavigationBar的高度,但如果您认为这个高度对您来说合适,可以不做改变。
希望这能帮到您。
import React, {useState, useContext} from 'react';
import {
SafeAreaView,
Text,
View,
Dimensions,
StyleSheet,
Alert,
FlatList,
StatusBar,
TouchableOpacity,
Image,
ScrollView,
Linking,
Platform,
ActivityIndicator,
} from 'react-native';
const {height, width} = Dimensions.get('window');
import {
BackArrow,
UserIcon,
BellIcon,
LogoutIcon,
HomeIcon,
} from '../Includes/Includes';
import Colors from '../Components/Colors';
import {WebView} from 'react-native-webview';
const Notification = () => {
return(
<>
{
Platform.OS == "ios" && (
<View style={{width: "100%", height: height * 0.05, backgroundColor: Colors.themeColor}}/>
)
}
<SafeAreaView style={styles.mainContainer}>
<StatusBar
barStyle={'light-content'}
backgroundColor={Colors.themeColor}
/>
<InnerHeader />
<MyView />
</SafeAreaView>
</>
)
}