超级简单 一分钟实现react-native屏幕适配
今天因为react-native的style只能给width和height设置数字 没有react上的vw和vh
因为之前经常用vh vw 感觉不适应
找到了一个新的方法 使用Demension模块
1,引入Demension
import { Demensions } from 'react-native';
2,获取屏幕的宽度高度
const { width,height } = Demensions.get('window');
方法2:
const width = Demensions.get('window').width;
3,接下来就可以直接在style标签中使用这几个变量
<View style={{width:width/,position:'relative',left:}}>
<Button
title="上传文档"
>
</Button>
</View>
比如我对这个按钮设置的宽度:width/5

如果变为:width/2

ok 你get到了吧
超级简单 一分钟实现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开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- 我的第一个React Native App
我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例.应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只 ...
- React Native 从入门到原理
React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...
- 关于React Native 火热的话题,从入门到原理
本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
随机推荐
- java比较器Comparator
1. 实现比较类 public class Comparator implements java.util.Comparator<TaskInfo>{ @Override public i ...
- mysql 通过localhost可以连接IP连接不上
因为MySQL默认没开 所以需要手动设置 开MySQL启远程连接的功能,在MySQL服务器控制台上执行以下命令: 设置权限: grant all privileges on *.* to 用户名@&q ...
- 为安卓手机刷上手机kali系统Nethunter
kali Nethunter是一个装在手机上的kali,集成了kali的工具包,hid,无线攻击等等. 本文主要叙述如何安装此系统并正确的配置.不让你走弯路. 首先我们拒绝傻瓜安装软件 kali ne ...
- python爬虫入门之快递查询
现在快递遍布生活的角角落落,一个快递其实是信息的集合体,里面包含大量的物流信息,那能不能自己实现一个快递查询的小功能?答案是能的!现在也有别人整理好的快递查询api,比如说快递100,可以通过它提供的 ...
- javaScript中this的指向?
javaScript中this对象是在运行时基于函数的执行环境绑定的,在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象. 但在实际中,代码环境复杂,th ...
- 关于2017届学长制作分享软件share(失物招领)的使用体验和需改进的内容
使用体验 1.注册界面 注册界面提示明显,提示用户输入什么类型的密码,而且输入什么样的用户名不限,注册界面色调比较单一,注册内容比较少,而且比较简单,体验感比较好,但注册界面色调和设计全无,使用感一般 ...
- Windows中使用QEMU创建树莓派虚拟机
环境: windows 10 2018-04-18-raspbian-stretch.img 一.下载QEMU 根据你的系统情况,下载相应的版本,并安装完成 https://www.qemu.org/ ...
- C语言 Win32 获取显示设备信息
函数 BOOL EnumDisplayDevicesA( LPCSTR lpDevice, DWORD iDevNum, PDISPLAY_DEVICEA lpDisplayDevice, DWORD ...
- 5.7 Nginx 其他模块
- PCA算法提取人脸识别特征脸(降噪)
PCA算法可以使得高维数据(mxn)降到低维,而在整个降维的过程中会丢失一定的信息,也会因此而实现降噪除噪的效果,另外,它通过降维可以计算出原本数据集的主成分分量Wk矩阵(kxn),如果将其作为数据样 ...