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

iPhone 12安全区域兼容问题解决：自定义屏幕参数修复
最新推荐文章于 2024-08-21 09:33:50 发布
原创 最新推荐文章于 2024-08-21 09:33:50 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native #SafeAreaView #iphone12安全区域 #兼容问题 #reactnavigation

本文讲述了作者在升级iPhone 12设备上遇到的适配问题，通过查找并添加新的屏幕参数到react-navigation依赖包源码中，成功解决了安全区域的兼容问题。

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

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

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

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

iPhoneX 安全区域 safe-area-inset-*样式不生效
Stavin Li的博客
08-26 7219
iPhoneX 安全区域 safe-area-inset-*样式不生效 解决办法： 添加 meta name="viewport" 中增加viewport-fit=cover内容 <meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> ...
React 实战 | H5页面在苹果IOS系统点击事件失效——软键盘的“锅”
qq_35536883的博客
09-05 1738
最近在开发一个用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 2757
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 Native Safe Area View 使用教程
gitblog_00631的博客
08-21 613
React Native Safe Area View 使用教程 项目介绍 react-native-safe-area-view 是一个用于处理 React Native 应用中安全区域的库。安全区域是指在不同设备上，如 iPhone X 及其后续型号，屏幕顶部和底部的非交互区域。这个库可以帮助开发者确保应用内容不会被设备的刘海、圆角或底部指示条遮挡。 项目快速启动 安装 首先，你需要安装 re...
关于React项目中动画不生效的一些思考
weixin_34297300的博客
07-19 1260
我最近做的React项目中需要做这样的一个组件来展示数据。 根据不同的数值，这个蓝色的条显示的宽度不同。 这个其实很简单，用正常的react的编程思维，我只要根据数据动态的计算它的宽度，循环生成相应的节点就行了。 其中的部分核心react代码如下 {data && data.length > 0 ? data.map((item, index) =&gt...
react-navigation-shared-element：react-native-shared-element的React导航绑定
02-05
React导航共享元素 React Navigation绑定用于 :dizzy: 兼容性 最新稳定版本（2.x）支持： React导航4和3 react-navigation-stack 2 react-navigation-stack 1 ...$ yarn add react-navigation-shared-element react-
react-native-safeareaview-demo:展示SafeAreaView使用情况的示例应用
05-19
react-native-safeareaview-demo 这是一个演示应用程序，用于显示<SafeAreaView>使用的不同方案。 链接 iPhone分辨率终极指南 （谢谢Matias！） 苹果开发人员人机界面指南 React社区SafeAreaView
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
ReactNative——导航器react-navigation（堆栈式导航器篇）
qq_37117521的博客
03-16 2873
RN持续更新噢~
react-navigation-custom-bottom-tab-component:ReactNavigation-具有自定义动画的TabBarComponent
05-02
React导航自定义底部选项卡组件 ReactNavigation-具有自定义动画的TabBarComponent 为底部导航提供很少的解决方案。...$ npm install react-navigation-custom-bottom-tab-component --save 文献资料
React Navigation源代码阅读 ： react-navigation.js
Details Inside Spring
05-09 886
// 本模块本身没有实现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 836
使用react-navigation6.X时,默认页面加载动画ios和Android不一致,废话不多说直接上图!是不是和之前的方法名称不一样啦!不过你设置上去ios和android都会适配!
React-Native导航组件React-Navigation的详细介绍
suwu150
10-20 8582
React-Native导航组件React-Navigation的详细介绍一、 导航栏分类二、 具体说明(一). StackNavigator 导航栏1.5 界面跳转和数据传递(1).navigate()-调用这个方法可以跳转到导航器中的其他页面(2) goBack() -关闭当前活跃屏,相当于功能(3)addListener() – 订阅导航生命周期事件变化(4) isFocused() – 查看屏的聚焦状态(5)state – 屏幕的当前状态/路由。
react-navigation使用介绍及UI组件外实现统一跳转
weixin_33759269的博客
03-01 839
react-navigation是React Native中非常著名的一个页面导航库，可以实现各种页面跳转，它是React Native社区总结出来的精华。有了这个库，我们可以实现类似iOS中UINavigationController的导航效果、常见的tabBar页面和Android中侧滑Drawer的效果，非常方便好用。 本篇文章主要介绍react-navigation的基本功能，以及一个我在...
react-navigation4.x导航跳转理解和问题总结
Mybells
04-24 2423
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 832
项目中使用TabNavigator实现底部三个tab页的跳转，在android机型上没有问题，但是适配IOS的时候发现图标都靠上如下图：经查看TabNavigator的实现发现如下问题：在TabBarBottom的_renderIcon方法里初始化TabBarIcon的时候有传一个styleshowLabel是外边传进来的控制是否显示tab上的标题的。useHorizontalTabs的实现如下：...
解决react-native-swiper在安卓上与react navigation TabNavigator一起用时不显示内容问题
12-01 2229
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 1041
在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 654
推荐使用：react-native-safe-area-view 在移动应用开发中，确保界面元素不会被刘海屏、状态栏或Home指示器遮挡是一项关键任务。为此，我们向您推荐一个已经过广泛测试和验证的开源库——react-native-safe-area-view。虽然这个库已被废弃，但其继任者react-native-safe-area-context仍然提供了相同的核心功能，并且在React Na...
tabBarOptions safeAreaInset
最新发布
11-09
<think>我们正在讨论React Navigation库中的底部选项卡导航器(tab navigator)的配置选项。具体是关于`tabBarOptions`中的`safeAreaInset`属性。 根据React Navigation文档，`safeAreaInset`用于处理iPhone X等具有刘海屏的设备，以避免内容被遮挡。它通过调整选项卡栏的内边距来确保内容在安全区域内显示。 注意：在React Navigation 5.x及以后版本中，`tabBarOptions`已被弃用，取而代之的是在选项卡栏组件中直接设置选项。但是，为了回答用户的问题，我们仍将解释它在旧版本中的使用。 在React Navigation 4.x及更早版本中，`tabBarOptions`是一个用于配置底部选项卡导航器的对象。其中，`safeAreaInset`是一个可选属性，它接受一个对象，可以设置`top`、`bottom`、`left`、`right`等属性来调整安全区域的内边距。然而，实际上在底部选项卡中，我们通常关注的是`bottom`属性，因为底部有可能会被设备的底部条（如iPhone的主页指示条）遮挡。 但是，请注意，在React Navigation的底部选项卡中，默认情况下已经考虑了安全区域。如果你需要覆盖默认行为，可以使用`safeAreaInset`。 然而，在React Navigation 5.x中，我们使用`Tab.Navigator`，并且可以通过`tabBar`属性来配置选项卡栏。安全区域的调整可以通过`safeAreaInsets`属性（注意这里是复数形式）或使用`SafeAreaView`来自动处理。 由于用户的问题中提到了`tabBarOptions`，我们假设用户使用的是旧版本（v4或更早）。因此，我们给出以下说明： 在`tabBarOptions`中，`safeAreaInset`是一个对象，它可以有以下属性： - `top`: 上边距（用于避免状态栏等） - `bottom`: 下边距（用于避免底部条） - `left`: 左边距（用于避免圆角或屏幕边缘） - `right`: 右边距（同上） 通常，我们只需要设置`bottom`，例如： ```javascript tabBarOptions: { safeAreaInset: { bottom: 'always', // 或 'never'，或者是数字值 }, // 其他选项... } ``` 但是，请注意，`safeAreaInset`的配置可能因版本而异。在旧版本的React Navigation中，`bottom`可以设置为`'always'`（总是应用安全区域插入）或`'never'`（不应用）。此外，也可以直接设置数值来指定额外的内边距。 然而，根据文档，在React Navigation v4中，`safeAreaInset`的`bottom`属性默认是`'always'`，这意味着会自动为底部安全区域添加内边距。如果你不需要，可以设置为`'never'`。 在React Navigation v5及更高版本中，我们不再使用`tabBarOptions`，而是使用`options`属性来配置每个屏幕的选项卡栏选项，或者使用`screenOptions`来配置整个导航器的选项卡栏。安全区域由`SafeAreaView`自动处理，也可以通过`tabBarSafeAreaInsets`（在`options`中）来设置。 因此，针对用户的问题，我们首先需要确定用户使用的React Navigation版本。但问题中没有提及，所以我们尽可能给出通用解释。 鉴于用户的问题是关于`tabBarOptions`中的`safeAreaInset`，我们重点放在v4及之前版本。 总结： - `safeAreaInset`用于调整选项卡栏在安全区域内的显示。 - 通常只需要设置`bottom`属性，以避免被设备底部条遮挡。 - 默认情况下，React Navigation会处理安全区域，所以大多数情况下不需要特别设置。但如果你发现底部被遮挡，可以尝试设置`safeAreaInset: { bottom: 'always' }`。 注意：如果用户使用的是v5或更高版本，建议迁移到新的API，因为`tabBarOptions`已被弃用。 下面，我们将生成相关问题。 </think>### tabBarOptions 中 safeAreaInset 的说明 在 React Navigation 的底部选项卡（Bottom Tabs）导航器中，`safeAreaInset` 是 `tabBarOptions` 的一个关键属性，主要用于处理**刘海屏设备的安全区域适配**问题。 #### 作用说明 1. **安全区域适配** 在 iPhone X 及后续刘海屏设备上，`safeAreaInset` 会自动为底部选项卡栏添加适当的内边距（padding），避免内容被设备底部的 Home 指示条遮挡（如图）： ![刘海屏底部安全区域示意图](https://reactnavigation.org/assets/safearea/iphonex-screens-6d7d4a9e6d9c7dbf6f6f2f2e2e2e2e2e.png)[^1] 2. **默认行为** - 默认值为 `{ bottom: "always" }`，表示**始终启用**底部安全区域适配 - 在非刘海屏设备上会自动失效，无需手动判断设备类型 #### 使用方法 ```javascript import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( <Tab.Navigator tabBarOptions={{ safeAreaInset: { bottom: "always" }, // 启用安全区域适配 // 其他配置... }} > {/* 选项卡屏幕定义 */} </Tab.Navigator> ); } ``` #### 配置选项 | 属性 | 值类型 | 说明 | |---------|-------------|----------------------------------------------------------------------| | `bottom`| `"always"` | 始终应用底部安全区域（默认值） | | | `"never"` | 禁用安全区域适配（可能导致刘海屏设备内容被遮挡） | | | `number` | 自定义底部内边距值（单位：pt），如 `{ bottom: 20 }` | #### 禁用示例 ```javascript // 完全禁用安全区域适配 tabBarOptions={{ safeAreaInset: { bottom: "never" } }} // 自定义底部内边距 tabBarOptions={{ safeAreaInset: { bottom: 30 } // 固定30pt内边距 }} ``` #### 注意事项 1. **React Navigation 5+ 的变更** 在 v5 及以上版本中，`tabBarOptions` 已被弃用，改用 `options` 属性： ```javascript <Tab.Navigator screenOptions={{ tabBarSafeAreaInsets: { bottom: 10 }, // 新属性名 }} > ``` 2. **Android 兼容性** 该属性在 Android 上会被自动忽略，因为 Android 系统已通过原生机制处理底部安全区域。 3. **布局冲突** 若同时使用 `safeAreaInset` 和自定义样式（如 `tabBarStyle: { height: 70 }`），需测试实际渲染效果，可能出现内边距叠加问题。 --- ###
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值