今天因为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. 吴裕雄--天生自然HADOOP操作实验学习笔记:单节点伪分布式安装

    实验目的 了解java的安装配置 学习配置对自己节点的免密码登陆 了解hdfs的配置和相关命令 了解yarn的配置 实验原理 1.Hadoop安装 Hadoop的安装对一个初学者来说是一个很头疼的事情 ...

  2. 解决 /actuator/beans不能访问

    在Spring Boot中配置了actuator,能够访问到/actuator/health,但是在访问/actuator/beans的时候却显示如下404错误. 原因是 /actuator/heal ...

  3. pip升级报错(权限问题)

    今天跟新pip的时候错一个接一个 看到拒绝访问应该是权限的问题,想起安装的时候选择谁可以使用软件(大概是这样的一个选项),选择了“只有我”,选择所有用户应该就不会存在这个问题了,那么怎么解决呢? 敲黑 ...

  4. 库克承认iPhone销售不佳是因定价太高,但降价能救苹果吗?

    iPhone定价愈来愈高,已经是不争的事实.但iPhone价格的飙升,其实并不是"正常"的.早在乔布斯时代,iPhone的价格维持在5000元左右.虽然看起来价格略高,但也在很多人 ...

  5. MyISAM/Innodb的区别

    MyISAM是MySQL的默认数据库引擎(5.5版之前).虽然性能极佳,而且提供了大量的特性,包括全文索引.压缩.空间函数等,但MyISAM不支持事务和行级锁,而且最大的缺陷就是崩溃后无法安全恢复.不 ...

  6. jumperserver安装

    参照官网地址进行安装 https://jumpserver.readthedocs.io/zh/master/setup_by_centos.html 在安装的时候踩了一个坑 Python 模块安装中 ...

  7. win10下python3安装深度学习一般要用的库

    matplotlib :绘图库 seaborn:基于matplotlib的图形可视化包 numpy:函数.矩阵运算库 pandas :基于numpy的结构化数据分析库 首先看一下cmd能不能使用pip ...

  8. 题解 P5043 【【模板】树同构([BJOI2015]树的同构)】

    进入正题 题意:将所有树结构相同的树归类. 思路 嗯,这道题让我们把树的结构归类,自然而然就想到了哈希,我们对这整颗树哈希一遍.然后判同构就十分之简单了.只需要找哈希值一样的树就可以了. 其实真得很简 ...

  9. SciPy 信号处理

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  10. MIT课程

    8.02  Physics II (电磁学基础) Introduction to electromagnetism and electrostatics: electric charge, Coulo ...