超级简单 一分钟实现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/5,position:'relative',left:10}}>
          <Button
            title="上传文档"
            >
          </Button>
        </View>

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

如果变为:width/2

ok 你get到了吧

猜你喜欢

转载自www.cnblogs.com/zhangchunqing/p/12376703.html
今日推荐