超级简单 一分钟实现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 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原 ...
随机推荐
- 科学计算库(BLAS,LAPACK,MKL,EIGEN)
函数库接口标准:BLAS (Basic Linear Algebra Subprograms)和LAPACK (Linear Algebra PACKage) 1979年,Netlib首先用Fortr ...
- webView之可加载JavaScript
有两个方法 方法一: 首先就是在xml文件中添加webview标签很简单不用说明 初始化控件 private WebView wv= (WebView) findViewById(R.id.wv); ...
- java并发LockSupport
java并发LockSupport LockSupport是阻塞和唤醒线程的重要类. park()方法使得当前线程阻塞 unpark(Thread thread)唤醒线程 例子 可以把注释取消再执行, ...
- springcloud gateway 项目打包部署运行
新建一个springboot项目然后做了一个小demo跳转到baidu pom <?xml version="1.0" encoding="UTF-8"? ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- Linux centosVMware shell脚本中的逻辑判断、文件目录属性判断、if特殊用法、case判断
一.shell脚本中的逻辑判断 格式1:if 条件 ; then 语句; fi 格式2:if 条件; then 语句; else 语句; fi 格式3:if …; then … ;elif …; th ...
- leetcode236 Lowest Common Ancestor of a Binary Tree
""" Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in ...
- 网络OSI七层模型及各层作用 与 TCP/IP
背景 虽然说以前学习计算机网络的时候,学过了,但为了更好地学习一些物联网协议(MQTT.CoAP.LWM2M.OPC),需要重新复习一下. OSI七层模型 七层模型,亦称OSI(Open System ...
- 通过 Service 访问 Pod【转】
本节开始学习 Service.我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 controller 会通 ...
- 065、Java面向对象之定义一个Book类,在主类中使用Book类
01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...