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;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容