简析在React Native中如何适配iPhoneX

最新推荐文章于 2024-03-04 21:29:12 发布
置顶 最新推荐文章于 2024-03-04 21:29:12 发布
阅读量1w 收藏 1
点赞数 1
文章标签： ReactNative iPhoneX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013718120/article/details/78488285
版权

 

欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。

 

一、介绍

 

iPhone X 发布也有一段时间了，独特的 "齐刘海"，以及 "小嘴巴" 带给了苹果粉们无限的遐想，同时也带来众多的吐槽。

前几天，招商银行公众号在微信推送了一条消息，11月招商银行App要发布最新版本，完美适配iPhoneX，是国内第一家银行App适配iPhoneX。感兴趣的朋友可以去下载体验一下。作为App开发者，此时你的心情是欣喜若狂，还是一万个XXX奔腾而过。欣喜也许是因为又可以在自己开发App中"大展拳脚"，而一万个XXX奔腾而过，也许完美表达了你的真心，又该乖乖的去做适配了。

扯了这么多，终于上道了。本篇博客内容就是要和大家分享在React Native开发的App中，我们该如何去做适配。首先在做适配之前，我们先了解下iPhoneX在UI上的一些变化。iPhoneX版本引入了一个新名词: 【安全区域】

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Songlcy
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
订阅专栏
react-native 全面屏适配 ios Android
像树的博客
05-20 1963
背景：现在ios和android都有五花八门的全面屏，但同时用户里也依然有很多使用非全面屏手机的用户 在使用react-native进行原生开发时，如何进行全面屏适配呢？ 1.ios全面屏适配 1.1 SafeAreaView SafeAreaView是react-native提供的组件，目前仅支持 iOS 设备以及 iOS 11 或更高版本。 目的是在一个“安全”的可视区域内渲染内容。避免内容渲染到不可见的“刘海”范围内， SafeAreaView只对ios设备生效。 1.2 SafeAreaVi.
react-native 设置APP禁止横屏
唤起鱼的记忆
12-01 1045
设置APP禁止横屏的方法： Android端： 在android/app/scr/main/AndroidManifest.xml文件中activity属性上添加： android:screenOrientation=“portrait” 即可 android:screenOrientation="portrait" IOS端 在Xcode项目中把相对应的勾去掉即可 ...
react native获取设备屏幕高度、顶部状态栏高度
坚强的泡沫的博客
03-29 1334
react native获取设备屏幕高度、顶部状态栏高度
一篇文章教会你如何在IOS真机上完美运行React Native
最新发布
qq_45430571的博客
03-04 1365
指导读者如何在iOS真机上运行React Native应用，并且包含您在这个过程中遇到的问题及其解决方案。
React Native实现自定义顶部导航栏
ｎｅｗｘｃ
04-22 1613
效果 import React, {Component} from 'react'; import { Platform, StatusBar, StyleSheet, Text, View, ViewPropTypes, } from 'react-native'; import PropTypes from 'prop-types'; import DeviceInfo from 'react-native-device-info'; const NAV_BAR_HEIGHT
React Native适配iphonex的方案
zww学习笔记
11-23 2377
随着iPhoneX的诞生，UI上也发生了一系列变化。1、iOS11前导航栏的高度是64，其中状态栏(StatusBar)的高度为20。iPhoneX的状态栏(StatusBar)高度变为了44(传感器区域高度)。2、iPhoneX的底部增加了虚拟Home区，由于安全区域的原因默认TabBar的高度由49变为83，增高了34(Home区高度)，所以自定义的底部TabBar也需要需改其适配方案。为了适配
调整SafeAreaView的大小
book_1992的专栏
06-12 943
直接使用SafeAreaView，在iOS端下可以把组件包裹在安全区域内，但有时候如果你不想SafeAreaView的区域限定在安全区域内，可以用下面的方法。 首先注意，要使用从 ‘react-navigation’ 导出的SafeAreaView 它有一个forceInset属性，可以控制是否增加safe inset，具体代码为 <SafeAreaView style={styles.safeView} forceInset={{ top: 'ne
在react native中使用阿里iconfont图标
01-08
3.在根目录中配置react-native.config.js文件 (以前是在rnpm配置，在package.json配置rnpm会有警告) module.exports = { assets: ['./src/assets/fonts/'], }; 目录结构 4.在终端使用以下命令，建立图标的联系 ...
详解React Native 屏幕适配（炒鸡简单的方法）
08-27
React Native 可以开发 ios 和 android 的 app，在开发过程中，势必会遇上屏幕适配，这篇文章主要介绍了详解React Native 屏幕适配（炒鸡简单的方法），小编觉得挺不错的，现在分享给大家，也给大家做个参考。...
react-native-unity-view：在react native中显示统一视图
02-05
注意：停止维护 React本土团结观 将unity3d集成到React Native应用程序中。 添加一个react native组件以显示统一性。 在iOS和Android上均可使用。... 在react native项目文件夹中创建一个名为unity文件夹。 将un
React-Native 简单工具类
XiaoZhuang__的博客
04-25 277
import { Dimensions, Platform, PixelRatio, StatusBar } from 'react-native'; import { isIphoneX } from 'react-native-iphone-x-helper'; import ToastShow from './Toast'; import DeviceInfo from 'react-native-device-info'; // 适配 import Px2dp from './Px2dp'; .
React Native 判断设备是否为iphoneX
三七二十一的博客
07-19 3661
import { Dimensions, Platform} from 'react-native' let screenW = Dimensions.get('window').width; let screenH = Dimensions.get('window').height; // iPhoneX const X_WIDTH = 375 const X_HEIGHT = 812 ex...
React-Navigation V2 使用教程 (一) createStackNavigator
热门推荐
卓原的进化之旅
07-04 1万+
前言： ReactNavigation出现很久了，并且在最近发布了V2版本，有一些功能的优化，和api的变化。原来的文档已经不适用了，所以新写一篇用来记录一下细节的东西。本篇内容是参照官方英文文档完成。 安装 //推荐yarn yarn add react-navigation # or with npm # npm install --save react-navigation ...
React Native学习－控制横竖屏第三方组件：react-native-orientation
dengkecou4635的博客
04-20 353
在项目中，有时候可能会想使不同的页面显示的横竖屏也不一样，比如前一段我做的《广播体操》的项目，在首页面，肯定是想使页面为竖屏显示，但是播放页面要为横屏显示，即使用户的手机可以转屏，我们的播放页面也要是横屏显示。 有这样的需求，我们可以借助react-native的第三方组件，react-native-orientation。 官方文档：https://github.com/yamil...
React Native 之判断横竖屏显示
李浩然的专栏
03-28 8310
1.这应用启动时能检测到设备是横置还是竖直的 2.当设备横竖屏切换时候 能坚持到这个事件 检测设备是竖直还是横置的一个方法是获取当前设备屏幕的宽与高，正常的设备在竖着的时候，宽小于高；而横置时，宽大与高。 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ i
react-native 禁止横屏
weixin_42222874的博客
05-23 3882
android端 android文件下app/src/main/AndroidManifest.xml 添加 android:screenOrientation="portrait" IOS端 在Xcode项目中把相对应的勾去掉即可
AndroidManifest.xml
hjwang1的专栏
10-31 542
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.client"> <uses-permission android:name="androi...
android横竖屏切换组件,react native横屏竖屏控制组件（react-native-orientation）
weixin_39753791的博客
05-28 914
react-native-orientation是一个横屏竖屏控制的react native组件，下面对react native横竖屏控制组件的用法做一个简单介绍。react-native-orientation的git地址：https://github.com/yamill/react-native-orientationreact-native-orientation组件安装1.如果项目正在运...
在 React Native 中，new Image 会出错怎么办
06-09
在 React Native 中，使用 `new Image()` 的方式来加载图片可能会出现一些问题，因为 React Native 中没有 `Image` 构造函数的实现。但是，React Native 提供了 `Image` 组件来加载图片，使用方法如下： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Songlcy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值