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

Posted 2020-11-28 zhangchunqing

今天因为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到了吧