前言

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
}
});

React Native 开发豆瓣评分(五)屏幕适配方案的更多相关文章

  1. React Native 开发豆瓣评分(八)首页开发

    首页完成效果展示: 一.开发占位图组件 在没有数据的时候使用占位图替代 items 的位置. 在 components 目录里创建 moviesItemPlaceholder.js import Re ...

  2. React Native 开发豆瓣评分(一)环境搭建&配置模拟器

    详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...

  3. React Native 开发豆瓣评分(四)集中管理 fetch 数据请求

    豆瓣评分的API接口 接口是从网上查找的,看样子应该是微信小程序里面扣出来的(ua 里面有 wechatdevtools) 接口都需要设置apiKey(054022eaeae0b00e0fc068c0 ...

  4. React Native 开发豆瓣评分(三)集成 Redux

    什么是 redux redux 是一个用于管理 js 应用状态(state)的容器.比如组件 A 发生了变化,组件 B 要同时做出响应.常见的应用场景就是用户的登录退出操作:未登录状态,个人中心显示登 ...

  5. React Native 开发豆瓣评分(七)首页组件开发

    首页内容拆分 看效果图,首页由热门影院.豆瓣热门.热门影视等列表组成,每个列表又由头加横向滑动的 电影海报列表构成. 所以可以先把页面的电影海报.评分.列表头做成组件,然后在使用 ScrollView ...

  6. React Native 开发豆瓣评分(二)路由配置

    路由管理使用官方推荐的 React Navigation; 配置环境 安装相关依赖 yarn add react-navigation react-native-gesture-handler Lin ...

  7. React Native 开发豆瓣评分(六)添加字体图标

    添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...

  8. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  9. 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. 阿里云服务器安装配置配置MySQL

    1.先更新软件 输入 yum -y update 2.下载MySql安装包 rpm -ivh http://dev.mysql.com/get/mysql57-community-release-el ...

  2. 【大数据作业十一】分布式并行计算MapReduce

    作业要求:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3319 1.用自己的话阐明Hadoop平台上HDFS和MapReduce的功 ...

  3. CEF拦截js层alert弹窗 OnJSDialog 《转》

    一 引言 CEF3嵌入后,用JS 弹出Alert框,按钮错位,确定按钮勉强能看到.很难看.为了改善体验,决定重写提示框. 环境:VS2008  VC  MFC.   二 原理 参看类 CefJSDia ...

  4. 微信小程序实例:分享给一个人还是分享到群的判断代码

    微信小程序的分享功能,在最新版库的ide上已经不能拿到分享回调了,官方api也删除了对应的回调函数,看样子是砍掉了,不过真机测试还是可以的,话不多说,上代码: /* // 分享功能回调 onLoad: ...

  5. C语言函数sscanf()的用法-从字符串中读取与指定格式相符的数据(转)

    C语言函数sscanf()的用法 sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: int sscanf( string str, string fmt, mixed var ...

  6. [转]eclipse中explorer显示方式

    原文地址:https://www.cnblogs.com/gne-hwz/p/7590451.html 不知道是不是上面的描述.做个记录 project explorer 项目资源管理器 这个要打开代 ...

  7. Mac下epub电子书制作编辑器 : Sigil

    官方博客:https://sigil-ebook.com github项目地址:https://github.com/Sigil-Ebook V0.9.10下载:https://github.com/ ...

  8. c#修改webservice 的地址和端口(修改配置文件)

    修改服务引用的地址和端口有两种方法: 1.直接修改配置文件web.config 2.动态修改: 右击转到实现 发现五个构造方法,通过第三个构造方法即可进行URL的初始化 IIS修改IP地址后 直接在初 ...

  9. WebGL学习笔记(七):输入和动画

    目前为止,我们绘制出来的3D物体都是静止的,接下来我们需要让桌面上的小盒子可以根据我们按键(上下键)前进后退: 输入方面,监听按键和鼠标消息直接在document上添加对应的监听就行了: 动画这块,我 ...

  10. 【视频开发】【计算机视觉】doppia编译之二:boost安装

    编译安装boost库的方法大部分都是来自http://www.linuxidc.com/Linux/2013-07/87573.htm这篇文章,这里我用自己的语言重新组织,稍作修改和补充,最主要是方便 ...