码迷,mamicode.com
首页 > 其他好文 > 详细

超级简单 一分钟实现react-native屏幕适配

时间:2020-02-28 14:07:34      阅读:457      评论:0      收藏:0      [点我收藏+]

标签:mic   实现   from   view   inf   src   code   png   ima   

今天因为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/5,position:relative,left:10}}>
          <Button
            title="上传文档"
            >
          </Button>
        </View>

比如我对这个按钮设置的宽度:width/5

技术图片

 

 

如果变为:width/2

技术图片

 

 

 

ok 你get到了吧

 

超级简单 一分钟实现react-native屏幕适配

标签:mic   实现   from   view   inf   src   code   png   ima   

原文地址:https://www.cnblogs.com/zhangchunqing/p/12376703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!