React Native适配安卓IOS刘海屏、异形屏方案

  • Z时代
  • 2024-01-10
  • 分类：综合

react

  • 首先顶部引入这几个模块

import {
	Platform,
    SafeAreaView,
    NativeModules,
    StatusBar
} from "react-native";
const { StatusBarManager } = NativeModules;

  • 获取状态栏高度

let statusBarHeight;
	if (Platform.OS === "ios") {
	     StatusBarManager.getHeight(height => {
	         statusBarHeight = height;
	     });
	 } else {
	     statusBarHeight = StatusBar.currentHeight;
}

  • 渲染的时候使用SafeAreaView(光使用SafeAreaView只能保证ios设备上正常)

 <SafeAreaView
    style={[styles.container, { marginTop: statusBarHeight }]}
 >
     <View
         style={[
             styles.container,
             { width: windows.width },
             bodyStyle ? bodyStyle : ""
         ]}
     >
         {headerLeft && (
             <View style={styles.leftBlock}>{headerLeft}</View>
         )}
         {title && <Text>{title}</Text>}
         {headerRight && (
             <View style={styles.rightBlock}>{headerRight}</View>
         )}
     </View>
</SafeAreaView>

以上是 React Native适配安卓IOS刘海屏、异形屏方案 的全部内容， 来源链接： utcz.com/z/383181.html

回到顶部