超級簡單 一分鍾實現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到了吧