解决react-navigation的SafeAreaView在iphone12系列手机失效问题

最新推荐文章于 2024-05-18 09:55:52 发布
最新推荐文章于 2024-05-18 09:55:52 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： ios react-native react 文章标签： iPhone 12 react-navigation 屏幕适配 兼容问题 自定义参数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz_chst/article/details/110851498
版权
react-native 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
react
4 篇文章 0 订阅
订阅专栏
ios
3 篇文章 0 订阅
订阅专栏

最近，苹果发布 iphone 12系列的新机，紧接着就遇到一些适配兼容问题，这不今天就遇到了iphone12 安全区域的兼容问题

在网上搜索了一番，说升级一下相关依赖包就好了。于是，就升级了一下 `react-navigation   @react-navigation/native`这两个依赖包好像还是无效。索性，就自己看依赖包的源码了吧。

发现，这里面只有 iphone X, iphone XSMAX,IPAD,IPADPRO屏幕参数，于是搜索一下关于iphone12系列的屏幕参数，添加进去,如图：

保存，重新运行，发现OK啦！

zz_chst
关注
专栏目录
React 实战 | H5页面在苹果IOS系统点击事件失效——软键盘的“锅”
qq_35536883的博客
09-05 1598
最近在开发一个用react开发的微信H5页面。 遇到了一个bug，就是当软键盘弹出再收起时，软键盘位置的点击事件失效。 刚开始以为是onclick的锅，但是换成onTouchStart还是没有好。而且iphone7 Plus没问题，但是iphone7就可以复现这个bug。 原因： 在IOS下，点击页面中比较靠下的input时，软键盘弹出，页面会上移，document.body.scrollOffs...
pod构建的ios版本引发 react-native-safe-area-context RN项目的pod-install构建异常
gdutRex的博客
05-03 2494
RN 使用react navigation的案例时运行pod-install报错 Auto-linking React Native modules for target `Entry_task_ts`: RNScreens and react-native-safe-area-context Analyzing dependencies Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-part
关于React项目中动画不生效的一些思考
weixin_34297300的博客
07-19 1180
我最近做的React项目中需要做这样的一个组件来展示数据。 根据不同的数值，这个蓝色的条显示的宽度不同。 这个其实很简单，用正常的react的编程思维，我只要根据数据动态的计算它的宽度，循环生成相应的节点就行了。 其中的部分核心react代码如下 {data && data.length > 0 ? data.map((item, index) =&gt...
React Navigation源代码阅读 ： react-navigation.js
Details Inside Spring
05-09 751
// 本模块本身没有实现React Navigation的任何具体功能， // 本模块的的主要任务是将分散在各个具体功能模块文件中的功能集中导出 module.exports = { // Core get createNavigationContainer() { return require('./createNavigationContainer').default; }...
React Native开发时用到react-navigation6.X版本的@react-navigation/native6.X页面加载动画IOS和Android默认不一致
qq_36472979的博客
09-26 748
使用react-navigation6.X时,默认页面加载动画ios和Android不一致,废话不多说直接上图!是不是和之前的方法名称不一样啦!不过你设置上去ios和android都会适配!
react-native-safeareaview-demo:展示SafeAreaView使用情况的示例应用
05-19
react-native-safeareaview-demo 这是一个演示应用程序，用于显示<SafeAreaView>使用的不同方案。 链接 iPhone分辨率终极指南 （谢谢Matias！） 苹果开发人员人机界面指南 React社区SafeAreaView
react-navigation-magic-move：使用react-navigation和react-native-magic-move的绑定
02-05
React导航神奇移动 使用和绑定 :rabbit_face: :... 此绑定通过安装将导航器场景信息转发到react-native-magic-move的钩子解决了该问题。 用法 安装 $ yarn add react-navigation-magic-move 将库导入到代码顶部的某个
react-native-pure-navigation-bar:React Native中完全可定制的导航栏
05-17
React本地纯导航栏 这是React-Native中一个完全可定制的导航栏。 您可以设置导航栏的全局统一样式...npm install --save react-native-pure-navigation-bar 用法 首先导入文件： import NaviBar from 'react-native
react-navigation-custom-bottom-tab-component:ReactNavigation-具有自定义动画的TabBarComponent
05-02
React导航自定义底部选项卡组件 ReactNavigation-具有自定义动画的TabBarComponent 为底部导航提供很少的解决方案。...$ npm install react-navigation-custom-bottom-tab-component --save 文献资料
(2020)React Native入门-React Navigation 5.x+react-native-vector-icons+实现夜间模式.zip
09-06
RN项目源代码： 文章地址： https://blog.csdn.net/lxyoucan/article/details/108427400 React Navigation 5.x安装 react-native-vector-icons安装与配置 React Navigation传参和跳转 夜间模式的支持演示
react-navigation使用介绍及UI组件外实现统一跳转
weixin_33759269的博客
03-01 763
react-navigation是React Native中非常著名的一个页面导航库，可以实现各种页面跳转，它是React Native社区总结出来的精华。有了这个库，我们可以实现类似iOS中UINavigationController的导航效果、常见的tabBar页面和Android中侧滑Drawer的效果，非常方便好用。 本篇文章主要介绍react-navigation的基本功能，以及一个我在...
react-navigation4.x导航跳转理解和问题总结
Mybells
04-24 2277
1. createAppContainer的作用？ 2. createSwitchNavigator的作用？ 3. 路由切换行为不一致？ 4. 安卓navigation.goBack() 返回白屏 5. TypeError: Cannot read property 'default' of undefined 6. 路由嵌套问题 7. 路由跳转刷新 8. 隐藏底部标签栏
React-navigation TabNavigator适配ios机型
m0_37779627的博客
07-03 713
项目中使用TabNavigator实现底部三个tab页的跳转，在android机型上没有问题，但是适配IOS的时候发现图标都靠上如下图：经查看TabNavigator的实现发现如下问题：在TabBarBottom的_renderIcon方法里初始化TabBarIcon的时候有传一个styleshowLabel是外边传进来的控制是否显示tab上的标题的。useHorizontalTabs的实现如下：...
解决react-native-swiper在安卓上与react navigation TabNavigator一起用时不显示内容问题
12-01 2139
React Native第三方react-native-swiper组件可以实现轮播功能，但是在开发安卓应用的时候，如果同时使用了react-navigation的TabNavigator导航，会出现swiper内容不显示的问题查看了react-native-swiper的github，发现issue中不少人都遇到了这样的问题 issue：https://github.com/leecade/r
react---IOS 14兼容问题及解决
qq_39295665的博客
07-28 818
在App开发中经常碰到ios兼容问题，此篇博客用于记录各兼容问题 1.背景图片无法出现 问题：在ios14版本以上的手机，以svg为背景图片的图片无法显示 解决：将svg图片换成png 2.tab组件无法滑动 问题：Tab组件无法滑动问题，排查到获取tab节点时，scrollWidth的值和clientWidth一样，可能是css属性影响到了或者系统兼容问题 查阅文档后，可以加上prerenderingSiblingsNumber属性 默认为0,表示预渲染视图的个数，为0表示只渲染当前页 http://ue
推荐使用：react-native-safe-area-view
最新发布
gitblog_00092的博客
05-18 356
推荐使用：react-native-safe-area-view react-native-safe-area-view⚠️ Deprecated: use the successor react-native-safe-area-context instead!项目地址:https://gitcode.com/gh_mirrors/rea/react-native-safe-area-view...
React Native 组件之SafeAreaView
xiangzhihong8的专栏
06-14 1万+
SafeAreaView简介 ReactNative官方从0.50.1版本开始，加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView，为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便。目前，SafeAreaView只适合iOS设备。 SafeAreaView的使用也非常简单，只需要将SafeAreaView嵌套在最根级别的视图中即可，并且在...
ReactNative 刘海屏适配iPhoneX
热门推荐
卓原的进化之旅
11-21 2万+
iPhoneX 出了之后 , 它的小刘海和底部的home条成为了移动端程序员需要适配的地方, 今天用ReactNative 初步在项目上尝试了适配. 先看一下iPhonex7和X上同样代码的效果图: UI适配 导航栏适配 iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡，所以需要注意原有这部分内容的设计。 iOS11前导航栏的高度是64，其中statusBa...
调整SafeAreaView的大小
book_1992的专栏
06-12 988
直接使用SafeAreaView，在iOS端下可以把组件包裹在安全区域内，但有时候如果你不想SafeAreaView的区域限定在安全区域内，可以用下面的方法。 首先注意，要使用从 ‘react-navigation’ 导出的SafeAreaView 它有一个forceInset属性，可以控制是否增加safe inset，具体代码为 <SafeAreaView style={styles.safeView} forceInset={{ top: 'ne
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值