[react-native] 컴포넌트의 크기를 지정할때 화면비율에 맞게 지정하는 간단한 방법

npm i react-native-responsive-screen

 

import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

 

위에 코드를 추가했다면 아래와 같이 사용가능하다. 

style={{
  width : wp('100%')  // 스크린 가로 크기 100%
  height : hp('50%') // 스크린 세로 크기 50%
  top : hp('30%') // 스크린 세로 크기의 30% 만큼 0에서부터 이동 
}}