react-native屏幕适配
写一个屏幕适配类文件AdapterUtil.js,这样避免每次进行单位换算
"use strict"
import {Dimensions, StatusBar, Platform, PixelRatio} from 'react-native'
//UI设计图的宽度
const designWidth =
//UI设计图的高度
const designHeight =
//手机屏幕的宽度
export const width = Dimensions.get('window').width;
//手机屏幕的高度
export const height = Dimensions.get('window').height;
//计算手机屏幕宽度对应设计图宽度的单位宽度
export const unitWidth = width / designWidth
//计算手机屏幕高度对应设计图高度的单位高度
export const unitHeight = height / designHeight
export const statusBarHeight = getStatusBarHeight();
export const safeAreaViewHeight = isIphoneX() ? :
//标题栏的高度
export const titleHeight = unitWidth * + statusBarHeight;
//字体缩放比例,一般情况下不用考虑。
// 当应用中的字体需要根据手机设置中字体大小改变的话需要用到缩放比例
export const fontscale = PixelRatio.getFontScale()
/**
* 判断是否为iphoneX
* @returns {boolean}
*/
export function isIphoneX() {
const X_WIDTH = ;
const X_HEIGHT = ;
return Platform.OS == 'ios' && (height == X_HEIGHT && width == X_WIDTH)
}
//状态栏的高度
export function getStatusBarHeight() {
if (Platform.OS == 'android') return StatusBar.currentHeight;
if (isIphoneX()) {
return
}
return
}
使用方法 ,直接按照UI图的 标注尺寸*unitWidth
import React,{Component} from 'react'
import {
View,
StyleSheet,
Text
} from 'react-native'
import {unitWidth, width}"../../utils/AdapterUtil";
export default class Demo extends Component {
render() {
const {backgroundColor, titleColor} = this.props
return (
<View style={styles.view}>
<View style={styles.view2}>
</View>
)
}
}
const styles= StyleSheet.create({
view:{
flex:,
alignItems: 'center',
},
view2:{
width:unitWidth*,
height:unitWidth*,
backgroundColor:'red'
}
})
react-native屏幕适配的更多相关文章
- react native Expo适配全面屏/Expo识别全面屏和正常屏
一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏 ...
- React Native 开发豆瓣评分(五)屏幕适配方案
前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...
- React Native踩坑日记 —— tailwind-rn
项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...
- React Native纯干货总结
随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...
- React Native 在 Airbnb(译文)
在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移 ...
- React Native不同设备分辨率适配和设计稿尺寸单位px的适配
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...
- React Native移动开发实战-4-Android平台的适配原理
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
- React Native 获取组件(Component)在屏幕上的位置
年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置 ...
- React Native 出现红屏幕报连接服务失败
最近移动项目组在本人的带领下切换进React Native开发应用,之前没接触过,用了几周之后,发现也就那么回事吧,小玩具项目用用还是可以的.今天Android小姑娘在Windows下出问题解决不了, ...
- React Native FlexBox
FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...
随机推荐
- android 开发学习2
Dao dao = new Dao(yi_ji_lu_zhang_dan.this);List<GetOneRecord> list = dao.getAllRecord();//创建迭代 ...
- realme发布会将于本周三在北京·幻艺术举行
5月13日消息,realme宣布将于5月15日(本周三)在北京·幻艺术中心发布realme X. 根据官方公布的海报,realme X采用了升降全面屏方案,无挖孔.无刘海.无水滴,支持屏幕指纹识别,正 ...
- git 公钥 ssh
1 安装 git 2 桌面右击 Git Bash Here 3 命令: git config --global user.name "git账户" git config --gl ...
- core_cm4.h(129): error: #35: #error directive: "Compiler generates FPU instructions for a device without an FPU (check __FPU_PRESENT)"
今天使用 systick 的时候,只使用了头文件 core_cm4.h,结果就报错了,原因是 __FPU_PRESENT 没有定义,这个定义其实在 stm32f4xx.h 里面.所以如果要解决这个错误 ...
- 吴裕雄--天生自然Django框架开发笔记:Django 模板
使用 django.http.HttpResponse() 来输出 "Hello World!".该方式将数据与视图混合在一起,不符合 Django 的 MVC 思想. Djang ...
- part6 城市页面搜索内容开发
keyword 监听时间做一个节流处理 keyword为input输入的内容 //当逻辑卡壳的时候 可以试着重启服务器,浏览器 当搜索内容出现很多的时候 内容无法滚动 可以引入 better-scro ...
- 翻译SSD论文(Single Shot MultiBox Detector)
转自http://lib.csdn.net/article/deeplearning/53059 作者:Ai_Smith 本文翻译而来,如有侵权,请联系博主删除.未经博主允许,请勿转载.每晚泡脚,闲来 ...
- Linux(CENTOS7) YUM方式安装mysql5.7
参考地址:https://www.cnblogs.com/linjiqin/p/7611204.html 注:该地址标题写的是CENTOS6.*版本的,但是我在我的CENTOS7.*上面安装是完美进行 ...
- C#调用C++系列一:简单传值
因为去实习的时候有一个小任务是C#想调用C++ opencv实现的一些处理,那我主要的想法就是将C++实现的OpenCV处理封装成dll库供C#调用,这里面还会涉及到一些托管和非托管的概念,我暂时的做 ...
- Python说文解字_Python之多任务_01
Python 之 多任务: Python之多任务是现在多任务编程运用Python语言为载体的一种体现.其中涵盖:进程.线程.并发等方面的内容,以及包括近些年在大数据运算.人工智能领域运用强大的GPU运 ...