超级简单 一分钟实现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 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
随机推荐
- python组合数据类型和数据结构
//2019.12-071.pyhton里面组合数据类型主要有三种:集合(set).序列(字符串str.列表list and 元组tuple)和映射(字典dic)2.集合类型一般使用大括号{}来进行表 ...
- Wepy框架和mpVue框架的比较及使用mpVue框架需要注意的点
Wepy框架 它是一款类Vue框架,在代码风格上借鉴了Vue,本身和Vue没有任何关系. mpVue框架 它是从整个Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发 ...
- 【剑指Offer面试编程题】题目1521:二叉树的镜像--九度OJ
题目描述: 输入一个二叉树,输出其镜像. 输入: 输入可能包含多个测试样例,输入以EOF结束. 对于每个测试案例,输入的第一行为一个整数n(0<=n<=1000,n代表将要输入的二叉树节点 ...
- SpringCloud学习之Zuul路由转发、拦截和熔断处理(七)
Spring Cloud Zuul 服务网关是微服务架构中一个不可或缺的部分.通过服务网关统一向外系统提供REST API的过程中,除了具备服务路由.均衡负载功能之外,它还具备了权限控制等功能. Sp ...
- JDBC--调用函数&存错过程
1.通过Connection对象的prepareCall()方法创建CallableStatement对象的实例,在使用prepareCall()方法时需传入一个String类型的字符串,该字符串用于 ...
- ActivePerl 安装
下载 https://www.activestate.com/products/activeperl/downloads/ 链接:https://pan.baidu.com/s/1IXPdYFd5bD ...
- hibernate部分源码解析and解决工作上关于hibernate的一个问题例子(包含oracle中新建表为何列名全转为大写且通过hibernate取数时如何不用再次遍历将列名(key)值转为小写)
最近在研究系统启动时将数据加载到内存非常耗时,想着是否有办法优化!经过日志打印测试发现查询时间(查询时间:将数据库数据查询到系统中并转为List<Map>或List<*.Class& ...
- java多线程(待完善)
1.小型系统 // 线程完成的任务(Runnable对象)和线程对象(Thread)之间紧密相连 class A implements Runnable{ public void run(){ // ...
- 部署 Prometheus Operator【转】
本节在实践时使用的是 Prometheus Operator 版本 v0.14.0.由于项目开发迭代速度很快,部署方法可能会更新,必要时请参考官方文档. 下载最新源码 git clone https: ...
- C++面试常见问题——11重载、覆盖、隐藏
重载.覆盖.隐藏 重载 在同一类定义的成员函数中,参数不同的同名函数为重载关系.重载与虚函数无关. class A{ private: int x; public: void fun(int); // ...