yarn add react-native-safe-area-context
import React, {useState, useEffect} from 'react';
import {SafeAreaView, View, StyleSheet, Dimensions, Text} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
const App = () => {
const insets = useSafeAreaInsets();
const [fullScreenHeight, setFullScreenHeight] = useState(
Dimensions.get('window').height,
);
useEffect(() => {
// 计算全屏高度,包括刘海区域
console.log('insets', insets); // top就是刘海屏的高度
console.log('Dimensions.get',Dimensions.get('window').height);
// 总高度 - 刘海屏高度就是SafeAreaView的全屏
setFullScreenHeight(Dimensions.get('window').height - insets.top);
}, [insets]);
return (
<SafeAreaView style={styles.container}>
<View
style={{
height: fullScreenHeight,
backgroundColor: 'pink',
}}>
<Text>除刘海外的全屏高度为:{fullScreenHeight}</Text>
{/* 这里放置您的组件 */}
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
安卓里面获取状态栏高度以及状态栏常见属性
// 在安卓里面获取状态栏高度如下
import { StatusBar, Platform } from 'react-native';
const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0;
console.log('状态栏高度:', statusBarHeight);
StatusBar.setBarStyle('dark-content', false); // 参数一是设置状态栏文本颜色,参数二指定是否有过渡动画
StatusBar.setBackgroundColor('transparent', false); // 参数同上,这个设置的是背景颜色
StatusBar.setTranslucent(true); // 设置全屏是否包含状态栏,默认全屏是不包含状态栏的,当设置为true,代表全屏高度也包含了状态栏,状态栏不会将界面撑起来了
StatusBar.currentHeight // 获取状态栏高度