一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏的statusBar高度问题. 三.适配方案 通过获取屏幕纵横比来判断是否为全面屏 1.获取宽高 const {width,height} = Dimensions.get('window') 2.计算纵横比 const wh = height/width 3.全面屏手机一般纵横比wh大于1.8,正…

前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题. 在 web 中常见的屏幕适配方式是使用 rem.vw作为基本单位. 在微信小程序中,使用 rpx 作为屏幕适配单位,结合 px(实际像素)进行页面开发,一个屏幕的宽分为 750 份,每一份的长度则为 1rpx. 我们可以根据微信小程序的适配方案进行 App 的屏幕适配. React Native…

项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看,避免踩坑. 后来觉得项目比较简单,tailwind对新上项目小伙伴确实不太友好,所以我们最终没有采用. 简介 GitHub - vadimdemedes/tailwind-rn: Use Tailwind CSS in React Native projects Tailwind 提倡了原子型的CS…

随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自己感兴趣的章节了解下. 项目整体技术栈: React Native React Navigation Firebase Jotai(项目后期加入) Typescript Jest 1. 配置项目绝对路径 一般的项目都会有一个源代码目录src ,并且随着项目的膨胀,会出现越来越多的子目录,这时候如果不…

在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移动设备的范例转变,我们能够从中受益很多.然而也有明显的痛点,它的优点不仅仅是这些 优点 跨平台React Native的主要好处是,您编写的代码可以在Android和iOS上本机运行.使用React Native的大多数功能都能够实现95-100%的共享代码,0.2%的文件是特定于平台的(andro…

React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRatio进行pt到px的转换import {PixelRatio} from 'react-native';const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);const px2dp = px=>PixelRatio.roundToNe…

打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. 图5.8  Android原生项目结构 从Android的项目结构,想必读者可以隐约感受到:Android适配是基于文件夹的,不同分辨率和尺寸的屏幕会自动适配相应的文件夹下的布局或资源文件.但是,想要进一步理解Android的适配,有必要先了解Android适配的一些基本概念: 屏幕尺寸:屏幕尺寸…

年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置,核心代码如下: renderSectionHeaderContent() { return ( <SectionHeader ref={(sectionHeader) => { this.sectionHeader = sectionHeader; }} title={this.state.se…

最近移动项目组在本人的带领下切换进React Native开发应用,之前没接触过,用了几周之后,发现也就那么回事吧,小玩具项目用用还是可以的.今天Android小姑娘在Windows下出问题解决不了,询问一番之后,又发现另外一个奇葩的问题,WebStorm下可以正常的编辑运行至模拟器,而使用react-native run-android不行,一番折腾之后,目测是她的环境变量出现问题,导致Server环境启动不了,打开package.json查看了下内容,发现解决方法如下: 1.react-na…

FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算:(flex 为浮点数) 1.当flex <= 0时 flex是无效的.此时视图不会被显示出来 2.当flex > 0 时: a.当有多个同一层级的视图时 占比为 当前视图占flex/(所有同一层级flex总和) b.当当前视图的父视图只有一个子View时,即当前视图占满了父视图. c.如果当前视…