写一个屏幕适配类文件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. SQL中行转列(PIVOT)与列转行(UNPIVOT)

    一.行转列 1.测试数据准备 CREATE TABLE [StudentScores] ( ), --学生姓名 ), --科目 [Score] FLOAT, --成绩 ) 执行结果: 2.行转列sql ...

  2. SpringBoot实现OAuth2认证服务器

    一.最简单认证服务器 1. pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <a ...

  3. 中国移动携手华为百度展示5G应用,实现8K视频传输

    在今日举行的 2019 年百度云智峰会上,中国移动携手华为和百度,首次展示基于 SA 架构的 5G Vertical LAN (行业局域网)技术,承载 8K 实时会议系统,助力企业云办公.该技术可为合 ...

  4. GetqueueStatus

    #include "stdafx.h" #include <Windows.h> #include <process.h> #include <ios ...

  5. tc: 模拟网络异常的工具

    作者:smallnest Linux Traffic Control (tc)的扩展 Network Emulation (netem)可以很方便的模拟网络不好的情况,一般新的linux内核中(> ...

  6. Pandas_one-hot encoding与dummy encoding

    Pandas_特征编码 one-hot encoding 基本思想是将离散型特征的每一种取值都看成一种状态,保证每一个取值只会使得一种状态处于激活状态. 编码函数pd.get_dummies() du ...

  7. Django2.0中的urlpattern匹配不输入任何网址时的写法

    如果使用urlpattern匹配不输入任何网址时,应该如何写? 例如:仅匹配http://127.0.0.1:8000/时想要跳转到某个页面,这时urlpattern中的url规则应该写成: 情况1: ...

  8. 51Nod1049 最大子段和

    我们来先看题: N个整数组成的序列a1,a2,a3,-,an,求该序列如ai+ai+1+-+aj的连续子段和的最大值.当所给的整数均为负数时和为0. 例如:-2,11,-4,13,-5,-2,和最大的 ...

  9. [XSS防御]HttpOnly之四两拨千斤

    今天看了<白帽子讲web安全>一书,顺便记录一下,HttpOnly的设置 httponly的设置值为 TRUE 时,使得Javascript无法获取到该值,有效地防御了XSS打管理员的 c ...

  10. 浅谈无参数RCE

    0x00 前言 这几天做了几道无参数RCE的题目,这里来总结一下,以后忘了也方便再捡起来. 首先先来解释一下什么是无参数RCE: 形式: if(';' === preg_replace('/[^\W] ...