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

2022-04-25 本文已影响0人无尽甜蜜里悠悠记忆

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 (

<Text>主页面{headerHeight}

);

}

export default HomePage;