今天因为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屏幕适配的更多相关文章

  1. react native Expo适配全面屏/Expo识别全面屏和正常屏

    一.最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边 二.但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏 ...

  2. React Native 开发豆瓣评分(五)屏幕适配方案

    前言 React Native 是以实际像素 dp 为单位的,这导致在不同分辨率的屏幕会有不一样的显示情况. 在原生 Android 中,可以根据不同的分辨率添加不同的样式目录,以解决不同分辨率的问题 ...

  3. React Native踩坑日记 —— tailwind-rn

    项目背景 在项目的初始阶段,我们需要建立自己的design system,我们spike了一些方案,tailwind-rn就是其中一种,如果有用到或者即将用到tailwind-rn的,可以进来看一看, ...

  4. React Native纯干货总结

    随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...

  5. React Native 在 Airbnb(译文)

    在Android,iOS,Web和跨平台框架的横向对比中,React Native本身是一个相对较新且快速开发移动的平台.两年后,我们可以肯定地说React Native在很多方面都是革命性的.这是移 ...

  6. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  7. 我的第一个React Native App

    我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例.应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只 ...

  8. React Native 从入门到原理

    React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...

  9. 关于React Native 火热的话题,从入门到原理

    本文授权转载,作者:bestswifter(简书) React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...

随机推荐

  1. 使用 sp_attach_db 系统存储过程附加数据库时---转载

    //附加数据库 sp_attach_db 当使用 sp_attach_db 系统存储过程附加数据库时. sp_attach_db:将数据库附加到服务器. 语法 sp_attach_db [ @dbna ...

  2. java中常用的数据结构--Map

    一.定义: 将键映射到值的对象. 地图不能包含重复的键; 每个键可以映射到最多一个值. public interface Map<K,V> 请注意!!!, Map 没有继承 Collect ...

  3. Python学习笔记001

    二进制 换算: 十进制转二进制 除二取余,然后倒序排列,高位补零. 将正的十进制数除以二,得到的商再除以二,依次类推知道商为零或一时为止,然后在旁边标出各步的余数,最后倒着写出来,高位补零就可以. 二 ...

  4. 产品降价、AR技术、功能降级,库克和苹果还有哪些底牌可以打?

    经过十年的高速发展,苹果和iPhone迎来了拐点,他们去年的境况,也连累了一大批的供应商,但如今的苹果财务健康,产业链稳固,在面对经济寒冬和激烈竞争的时候,有很多牌可以打,而且常常会在关键时刻打出来, ...

  5. Vue二次精度随笔(2)

    1.vue中数组更新是否会引起视图刷新的研究 (1)vue中修改数组可以引起视图刷新的方法 (2)不会引起数组刷新的方法,需要手动进行赋值 (3)有些数组的变化是不能够引起视图的刷新的,一个是修改数组 ...

  6. 攻防世界web新手练习区(2)

    弱认证:http://111.198.29.45:43769/ 打开是这个页面: 用户名输入1,密码输入2,试试看.会提示你用户名为admin.接下来用burp对密码进行爆破,发现弱口令0123456 ...

  7. VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

     created() {     var that=this     axios.get('http://jsonplaceholder.typicode.com/todos')     .then( ...

  8. jsp快速回顾

    http://www.cnblogs.com/zfc2201/archive/2011/08/17/2143615.html http://blog.163.com/mount_lee/blog/st ...

  9. 使用JavaScript实现一个简单的编译器

    在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...

  10. 010-PHP输出数组中第某个元素

    <?php $monthName = array(1 => "January", "February", "March",//初 ...