리액트 네이티브 반응형

간단한 앱을 만들며 공부하고있다.

width,height 속성들은 퍼센트(%) 사용이 가능하지만, font-size는 사용이 불가했다.

width:20% , font-size: 10
이렇게 설정했을 때, 만약 화면이 작다면 폰트와 설정한 width가 맞지 않을 것 같다.

그래서 구글링해봤다.

---

화면의 크기 구하기

1. Dimensions

import {Dimensions} from "react-native"

const Height = Dimensions.get("window").height;
const Width = Dimensions.get("window").width;

2. useDimensions

import { useWindowDimensions } from "react-native";

<Text style={{width:window.width / 3}} > Hello World </Text>

• 스택오버플로우를 보니 아직 사용이 불가한 휴대폰이 많다는 것 같다.
  해당 솔루션은 비추천수가 많이 찍혀있다..

부모의 크기 구하기

onlayout

• 사용법

const {x, y, width, height} = event.nativeEvent.layout

--

const [parentHeight,setParentHeight] = useState(0);

const onLayout = event => {
 const {height} = event.nativeEvent.layout;
  setParentHeight(height)
}

return (
  <View style={{width: 100, height: 100}} onLayout={onLayout}>
     <View style={{height:parentHeight / 2}}>
     </View>
  </View>
  
  )