超级简单 一分钟实现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 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
随机推荐
- 关于Simulink的sample time的问题
在对simulink建模的过程中,有时候会遇到sample time出现错误的问题,比如下图是我在使用simulink自带的Recursive least square Estimator最小二乘估计 ...
- 如何知道某个ACTIVITY是否在前台?
本文链接:http://zengrong.net/post/1680.htm 有一个Android应用包含包含一个后台程序,该程序会定期连接服务器来实现自定义信息的推送.但是,当这个应用处于前台的时候 ...
- Redis 一些基本的概念和基础
Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...
- 「Luogu1901」发射站
传送门 Luogu 解题思路 单调栈裸题,扫两遍处理出每个点左边第一个比他高的和右边第一个比他高的,然后模拟题意即可. 细节注意事项 咕咕咕. 参考代码 #include <algorithm& ...
- Waiting for table metadata lock 错误
在 alter table 时,必然出现了 lock 错误,检查 processlist ,全都是 sleep 状态,然后检查 information_schema.innodb_trx 发现一个活跃 ...
- 机器学习算法中的网格搜索GridSearch实现(以k-近邻算法参数寻最优为例)
机器学习算法参数的网格搜索实现: //2019.08.031.scikitlearn库中调用网格搜索的方法为:Grid search,它的搜索方式比较统一简单,其对于算法批判的标准比较复杂,是一种复合 ...
- javac导出参考文档报错 错误: 编码GBK的不可映射字符”
- 项目实战报异常Exception及决绝方案
1.报LifecycleException,再配置一下jdk即可,然后再手动添加maven 解决方法: 然后,手动添加jar包 2.maven 项目,右键maven build启动项目的时候,报下面 ...
- ubuntu安装discourse论坛----结合在apache服务上建立虚拟主机
指导操作:https://github.com/discourse/discourse/blob/master/docs/INSTALL-cloud.md 一.先安装 Docker / Git: wg ...
- 小程序列表循环出来的list是不同接口赋的值
需求:首页有三个列表,样式形式都是一样的,可以循环展示,但是循环的内容list部分是来自于不同的三个接口. data: { indexList:[{ name: "中考体能突击营" ...