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

首先顶部引入这几个模块

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设备上正常)

 <SafeAreaViewstyle={[styles.container, { marginTop: statusBarHeight }]}><Viewstyle={[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刘海屏、异形屏方案相关推荐

iPhoneX适配问题 iOS刘海屏安全区域处理 IOS小黑条处理 IOS兼容处理
IphoneX适配问题 iOS刘海屏安全区域处理前言适配前需要了解的几个关键字安全区域 viewport-fit env() 和 constant() 适配的方法第一步设置网页在可视区的布 ...
如何用 React Native 创建一个iOS APP？（二）
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
React Native Reload（双击R）红屏 Could not connect to development server
如图所示,Reload 或者双击R后,出现大红屏. 总结一下,问题主要出现在下面三个方向. 检查一下,package是否正常运行. 看一下是否忘记启动package,或者提供了错误的监听端口. 看一下 ...
企业微信链接适配安卓ios移动端问题汇总
ios网页上拉下弹(橡皮筋样式) ios在 meta标签配置viewport时要加viewport-fit=cover,防止底部黑色小横条部分出现小白边遮挡footer部分. 该问题布局可使用fixe ...
React Native热更新(iOS)-Pushy
React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...
react native 适配机顶盒、智能电视遥控器解决焦点问题
上一篇文章详细讲解了我自己搭建react native 的开发环境,现在就给大家介绍下如何自定义自己的原声view .实现自己的适配,这里主要是机顶盒遥控器的适配,react native 本身不支持 ...
React Native 拆分业务包 bundle拆包分包携程方案
引言 http://www.jianshu.com/p/333e11dbdc62 React Native以其独到的特性,吸引着互联网公司纷纷为之投入或多或少的人力.在实际的开发过程中,开发者们也确实 ...
APP适配安卓手机刘海屏
如果你想允许全屏界面内容显示到刘海区域 ,只要在AndroidManifest.xml文件里配置如下代码即可:  <m ...
【react native】使用iOS模拟器运行
背景使用XCode中的模拟器来运行项目vscode中的rn代码. 方法官方文档:在iOS模拟器上运行.搭建开发环境 1.下载XCode 2.打开模拟器打开 Xcode > Preferen ...

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

React Native适配安卓IOS刘海屏、异形屏方案相关推荐

最新文章

热门文章