React Native 开发豆瓣评分（五）屏幕适配方案

前言

React Native 是以实际像素 dp 为单位的，这导致在不同分辨率的屏幕会有不一样的显示情况。

在原生 Android 中，可以根据不同的分辨率添加不同的样式目录，以解决不同分辨率的问题。

在 web 中常见的屏幕适配方式是使用 rem、vw作为基本单位。

在微信小程序中，使用 rpx 作为屏幕适配单位，结合 px（实际像素）进行页面开发，一个屏幕的宽分为 750 份，每一份的长度则为 1rpx。

我们可以根据微信小程序的适配方案进行 App 的屏幕适配。

React Native 屏幕适配

在 utils 目录创建 device.js

import { Dimensions, PixelRatio, StatusBar} from 'react-native';export const deviceWidth = Dimensions.get('window').width;      //设备的宽度
export const deviceHeight = Dimensions.get('window').height;    //设备的高度
export const statusHeight = StatusBar.currentHeight; // 状态栏的高度，如果要自定义头部的话会用到export function px(size) {return deviceWidth / 750 * size
}

使用

import { px } from '../utils/device';const styles = StyleSheet.create({test: {width: px(750),height: px(120),paddingLeft: px(30),paddingRight: px(30),borderBottomWidth: 1}
});

转载于:https://www.cnblogs.com/hl1223/p/11113742.html

React Native 开发豆瓣评分（五）屏幕适配方案相关推荐

React Native 开发豆瓣评分（六）添加字体图标
添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...
React Native开发(一)
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac ...
React Native开发之必备React基础
为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识. 概述本节课将从React的特点.如何使用React.JSX语 ...
React Native开发错误警告处理总结（已解决！持续更新）
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
React Native开发规范(非官方，自己定义的)
React Native开发规范一.命名规范二.代码格式三.注释规约四.样式规约五.Redux 相关操作六.桥接规约七.JSX 规约八.组件规约九.npm 规约十.性能优化一.命 ...
【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
windows 下配置 react native 开发环境
windows 下配置 react native 开发环境安装nvm 由于react native 需要使用 NodeJs 4.0以上版本,为了方便切换NodeJs,首先我们需要安装nvm. 你可以 ...
Windows环境下安装React Native开发环境----记一次填坑过程
前言集成React Native开发环境遇到各个坑,调试了很久出现过找不到设备,百度上个别人的资料有误被绕来绕去耽误了很多时间,下载慢等待时间过长等问题,最后多方查阅资料,电脑重启等操作终于部署好了 ...
iOS新知识学习之React Native开发工具集
本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

React Native 开发豆瓣评分（五）屏幕适配方案

前言

React Native 屏幕适配

React Native 开发豆瓣评分（五）屏幕适配方案相关推荐

最新文章

热门文章