写一个屏幕适配类文件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屏幕适配的更多相关文章

  1. react native Expo适配全面屏/Expo识别全面屏和正常屏

    一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏 ...

  2. React Native 开发豆瓣评分(五)屏幕适配方案

    前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...

  3. React Native踩坑日记 —— tailwind-rn

    项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...

  4. React Native纯干货总结

    随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...

  5. React Native 在 Airbnb(译文)

    在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移 ...

  6. React Native不同设备分辨率适配和设计稿尺寸单位px的适配

    React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...

  7. React Native移动开发实战-4-Android平台的适配原理

    打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...

  8. React Native 获取组件(Component)在屏幕上的位置

    年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置 ...

  9. React Native 出现红屏幕报连接服务失败

    最近移动项目组在本人的带领下切换进React Native开发应用,之前没接触过,用了几周之后,发现也就那么回事吧,小玩具项目用用还是可以的.今天Android小姑娘在Windows下出问题解决不了, ...

  10. React Native FlexBox

    FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...

随机推荐

  1. 计算方法执行完的耗时 c#

    Stopwatch watch = Stopwatch.StartNew(); //要执行的方法 test(); watch.Stop(); Console.WriteLine(string.Form ...

  2. Elasticsearch核心概念

    Elasticsearch 核心概念 Cluster 代表一个集群, 集群中有多个节点, 其中一个为主节点, 该节点可以通过选举产生.(主从节点只针对于集群内部) 去中心化: 对于集群外来说无中心节点 ...

  3. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) E. Arson In Berland Forest

    E. Arson In Berland Forest The Berland Forest can be represented as an infinite cell plane. Every ce ...

  4. [BJDCTF2020]ZJCTF,不过如此

    0x00 知识点 本地文件包含伪协议 ?text=php://input //执行 post: I have a dream ?file=php://filter/read/convert.base6 ...

  5. 倍增求LCA(最近公共祖先)

    P3379 [模板]最近公共祖先(LCA) 题目描述: 读入一棵以1为根的树,q次询问,每次给定x和y,问x和y的最近公共祖先是哪一个节点. 树的读入格式:n-1行每行两个整数x.y,表示一条连接x和 ...

  6. HTTP TCP UDP ICMP IP ARP 协议详解(10.15 第二十一天)

    ARP协议 ARP(Address Resolution Protocol)协议 地址解析协议 把网络层的IP地址翻译成在数据链路层寻址的48位硬件地址(MAC地址) 在OSI模型中ARP协议属于链路 ...

  7. oracle(5)--DQL查询语句

    DQL 数据查询语句(data query language) 1.查询条件符号: < ,  > ,  = ,    <= ,  >= ,    != ,  < > ...

  8. bne 1b 汇编含义

    汇编指令中 bne label 这条指令有以下两种特别的写法:bne 1b, bne 1f. bne 1b 指的是 backward,倒退寻找标号为 1 的地方并跳转. 同样也有 bne 1f,值得是 ...

  9. RGB转到HSV色彩空间转换

    原文链接:https://blog.csdn.net/lsg19920625/article/details/78416649

  10. SAP_BASIS常用事务代码

    1.SM66:监控当前系统的所有进程: 2.SM50/SM51:监视当前客户端的所有进程: 3.AL08:查看系统当前用户登录情况: 4.ST22:查看系统发生的DUMP: 5.ST03:查看系统当前 ...