今天因为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. 三 Spring对于延迟加载问题的解决

    Spring提供了延迟加载问题的解决方法 什么是延迟加载? 延迟加载:lazy(懒加载) 执行到该行代码的时候不会发送语句,真正使用这个对象的属性的时候才会发送sql语句进行查询. 类级别延迟加载:指 ...

  2. 吴裕雄--天生自然HADOOP学习笔记:hadoop集群实现PageRank算法实验报告

    实验课程名称:大数据处理技术 实验项目名称:hadoop集群实现PageRank算法 实验类型:综合性 实验日期:2018年 6 月4日-6月14日 学生姓名 吴裕雄 学号 15210120331 班 ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:选择框(Select)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. eclipse如何把多个项目放在文件夹下,用文件夹分开不同的项目

    在Package Explorer顶部的右侧有有机表图标按钮,点击倒三角 Top Level Elements->Working Set.此时就会发现,很多项目会自动纳入一个文件夹,这个文件夹的 ...

  5. java关于hasNext()

    编写一段程序实现如果输入的一组数中含非整数数字,输出数字相加的和以及"attention"字符,如果全部是数字便输出数字的和. 程序1: package mian; import ...

  6. 树莓派开启VNC远程桌面

    分类: Raspberry Pi Linux2013-03-12 10:18 4288人阅读 评论(1) 收藏 举报   目录(?)[+]   1.安装VNC sudo apt-get install ...

  7. 深入理解 C# 协变和逆变 (转载)

      深入理解 C# 协变和逆变 msdn 解释如下: “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型. “逆变”则是指能够使用派生程度更小的类型. 解释的很正确,大致就是这样,不过不 ...

  8. (实例)Linux 内核添加exfat驱动

    背景: 由于exfat是常用的文件系统格式,而Linux由于版权的问题,没有在官方中添加有关的驱动. 但是 微软也同意开源了,所以比较新的 Linux 会支持这一块. 为了支持exfat的驱动,我们需 ...

  9. 强制找回GitLab管理员账户密码的方法

    为了开发运维工具,我们采用自行搭建的GitLab来管理所有代码.悲催的是最近忘记了管理员账户的密码,而且没有邮件服务器,因此无法接收密码找回的邮件,导致无法新建用户或者项目,这样一来,岂不就成为了一个 ...

  10. 无聊看看c是咋写游戏的

    /* 项目名称:五子棋, vs */ /* 绘图环境,初始化游戏 1.绘图环境(窗口) 2.背景图片 3.背景音乐 4.绘制棋盘 */ #include"pch.h" #inclu ...