PixelRatio를 사용하면 디바이스의 밀도와 글꼴 크기에 제어할 수 있습니다.
올바른 크기의 이미지 가져오기
픽셀 밀도가 높은 장치에 있는 경우 더 높은 해상도의 이미지를 얻어야 합니다.
표시되는 이미지의 크기에 픽셀비율을 곱하는 것이 좋습니다.
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100)
});
<Image source={image} style={{ width: 200, height: 100 }} />;Pixel grid snapping
iOS에서 임의의 정밀도 요소에 대한 위치와 치수 dimensions 를 지정할 수 있습니다.
하지만 결론적으로 물리적인 디스플레이는 고정된 수의 픽셀만을 가지고 있기 때문에, iOS는 하나의 원래 픽셀을 여러 개의 픽셀로 분산시켜서 눈을 속이는 방식으로 사용자 값에 최대한 충실하려고 합니다. 그 결과, 화면에서 보여지는 요소가 흐릿하게 보여지는 단점이 발생합니다.
이러한 단점을 해결하기 위해 리액트 네이티브에서 모든 픽셀을 자동으로 반올림하면서 해결했습니다. 하지만 이러한 반올림을 할 때에도 조심해야 되는게, 반올림 오차가 누적될 때 반올림이나 반올림되지 않은 값을 동시에 사용할 필요는 없습니다. 한 픽셀 테두리가 사라지거나 두 배로 더 커질 수 있어서 반올림 오류가 한 개라도 발생하는 것은 치명적이기 때문입니다.
리액트 네이티브에서는 자바스크립트 및 레이아웃 엔진 안의 모든 것이 임의의 정밀 번호로 작동합니다. 메인 스레드에서 네이티브 요소의 위치와 치수를 설정할 때만 라운딩합니다. 또한 반올림 오류가 누적되지 않도록 부모가 아닌 루트를 기준으로 반올림 작업을 다시 수행합니다.
메서드
PixelRatio.get()
디바이스의 픽셀 밀도를 반환합니다. 즉, 기기에 따라 반환되는 값이 다릅니다.
PixelRatio.getFontScale()
글꼴 크기에 대한 축척 비율을 반환합니다.
이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다.
- 안드로이드: Settings > Display > Font Size 에서 설정된 사용자 기본 설정을 반영합니다.
- iOS: Settings > Display & Brightness > Text Size 에서 설정된 사용자 기본 설정을 반영하며, Settings > Accessibility > Display & Font Size > Large Text에서도 값을 업데이트할 수 있습니다.
만약 글꼴 축척이 설정되지 않은 경우, 디바이스의 pixel ratio가 반환됩니다.
PixelRatio.getPixelSizeForLayoutSize()
static getPixelSizeForLayoutSize(layoutSize: number): number레이아웃크기 dp -> 픽셀 크기 px 로 변환합니다.
정수를 반환하도록 보장합니다.
PixelRatio.roundToNearestPixel()
static roundToNearestPixel(layoutSize: number): number레이아웃 크기 dp를 정수 픽셀에 해당하는 가장 가까운 레이아웃 크기로 반환합니다.
예를 들어 픽셀 비율이 3인 장치에서 PixelRatio.roundToNearestPixel(8.4) = 8.33 로 정확히 8.33 * 3 = 25 픽셀에 해당합니다.
