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在父视图中的占比. 占比如何计算 ...
随机推荐
- sql server C#操作。原文在收藏页面
C#操作SQL Server数据库 1.概述 2.连接字符串的写法 3.SqlConnection对象 4.SqlCommand对象 5.SqlDataReader对象 6.DataSet对象 7 ...
- Spring 控制反转容器(Inversion of Control – IOC)
系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Contro ...
- HDU - 4405 Aeroplane chess(期望dp)
题意:沿着x轴从0走到大于等于N的某处,每一步的步数由骰子(1,2,3,4,5,6)决定,若恰好走到x轴上某飞行路线的起点,则不计入扔骰子数.问从0走到大于等于N的某处的期望的扔骰子次数. 分析: 1 ...
- 【PentestBox】rubygems.rb erorr
PentestBox可以在windows下运行一些Linux系统命令,但仍然基于windows. 若使用msfconsole或者gem命令是出现: internal:gem_prelude:1:in ...
- id3算法python实现
import numpy as npimport operator def createDataSet(): dataSet = [ [1,1,'yes'], [1,1,'yes'], [1,0,'n ...
- 一小时搞定Eureka
一.什么是Eureka Eureka是Netflix公司开源的产品,它是一种基于REST( Representational State Transfer )的服务,主要用于AWS云. Eureka提 ...
- [极客大挑战 2019]BabySQL
0x00 知识点 双写绕过 简单测试一下,发现or在登陆过程被过滤,想到使用oorr试试,结果成了?! 最后多测试一下,发现from union select 这些关键函数都被替换为空 本题直接进行常 ...
- Go语言之冒泡排序
package main //main函数 import "fmt" //相当于#include func main() { ar := [], , , , , , , , , } ...
- k8s中解决容器时差问题
解决k8s的pod容器的时差常用的两种方式: 1.通过设置pod 模板中的环境变量 env解决 在pod的模板中添加以下: apiVersion: v1 kind: Podmetadata: na ...
- 干货 | TiDB Operator实践
干货 | TiDB Operator实践 北京it爷们儿 京东云开发者社区 4天前 K8s和TiDB都是目前开源社区中活跃的开源产品,TiDB Operator项目是一个在K8s上编排管理TiDB集 ...