2022-04-25 react-native获取刘海屏的高度

android和ios都支持

import Reactfrom 'react';

import { StyleSheet, Text, View }from 'react-native';

import {getDefaultHeaderHeight }from '@react-navigation/elements';

import {

useSafeAreaFrame,

  useSafeAreaInsets,

}from 'react-native-safe-area-context';

const styles = StyleSheet.create({

container: {

flex:1,

  },

});

function HomePage() {

const frame =useSafeAreaFrame();

  const insets =useSafeAreaInsets();

  const headerHeight =getDefaultHeaderHeight(frame, false, insets.top);

  console.log('headerHeight=>', headerHeight);

  return (

<View style={[styles.container, {marginTop: headerHeight /2 }]}>

      <Text>主页面{headerHeight}

  );

}

export default HomePage;