RN获取iOS刘海屏除刘海外全屏高度以及安卓状态栏的StatusBar的设置

ios

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 // 获取状态栏高度