超级简单 一分钟实现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基础-单例模式_继承_覆盖_多态
1.单例模式: 1)提出原因 是由gof 也就是四人组提出来的.为了保证jvm中某一类型的java对象永远只有一个,同时也是为了节省内存的开销.因为外面程序可以通过new的方法直接调用类里面的构造方法 ...
- redis有序集合-zset
概念:它是在set的基础上增加了一个顺序属性,这一属性在添加修改元素的时候可以指定,每次指定后,zset会自动按新的值调整顺序.可以理解为有两列的mysql表,一列存储value,一列存储顺序,操作中 ...
- fiddler抓取URL之过滤设置
Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 只要是开启了fiddler,我们的 ...
- docker-compose 修改zabbix images 添加微信报警插件 时间同步 中文乱码 添加grafana美化zabbix
我们先来看一下我们要修改得 zabbix.yaml github https://github.com/bboysoulcn/awesome-dockercompose ve ...
- 设备树DTS 学习:2-设备树语法
背景 通过上一讲了解完设备树DTS有关概念,我们这一讲就来基于设备树例程,学习设备树的语法规则. 参考:设备树详解dts.设备树语法详解.设备树使用总结 设备树框架 1个dts文件 + n个dtsi文 ...
- Heap(堆)的基础知识入门
堆 逻辑结构: 1 / \ 1 3 / \ / \ 4 5 6 null 物理结构; 1.首先堆是一个完全二叉查找书(Co ...
- ReadAsm2
首先查看题目 下载文档之后用虚拟机打开(我用的是Kali Linux) 推测应该是对这个func函数反汇编结果应该就出来了 用c写一下算出结果 #include<bits/stdc++.h> ...
- GoJS实例3
复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jsp快速回顾
http://www.cnblogs.com/zfc2201/archive/2011/08/17/2143615.html http://blog.163.com/mount_lee/blog/st ...
- Java笔记--集合
1.Java集合类可以用于存储数量不等的多个对象,还可以用于保存具有映射关系的关联数组. 2.Java集合可分为Collection和Map两种体系: --Collection:1)Set:元素无序. ...