React Native 시작 화면(11)

차리다
우선, 우리는 공식 문서의 폭과 높이 1절에서 알 수 있듯이 RN의 단위는 dp이고 이것은 안드로이드의 단위와 일치한다!홈페이지:

A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp:
dp = (width in pixels * 160) /  screen density

여기의 화면 밀도는 (dpi/160)와 같고 RN에서 우리는 PixelRatio를 통해 얻을 수 있다.

PixelRatio.get() === 1

mdpi 안드로이드 장치 (160dpi)

PixelRatio.get() === 1.5

hdpi 안드로이드 디바이스(240dpi)

PixelRatio.get() === 2

iPhone 4, 4S

iPhone 5, 5c, 5s

iPhone 6

xhdpi 안드로이드 장치 (320dpi)

PixelRatio.get() === 3

iPhone 6 plus

xxhdpi 안드로이드 디바이스(480dpi)

PixelRatio.get() === 3.5

Nexus 6

여기서 언급된 몇 가지 개념을 정리해 보면 무방하다.

dp(dip)(Density-independent pixels)는 화면 밀도를 바탕으로 하는 추상적인 단위로 픽셀은 밀도와 무관하다.160인치당 모니터에서 1dp = 1px.특히 dp는 상대적인 길이 단위이기 때문에 간단하게 말하면 1dp가 서로 다른 화면이나 서로 다른 ppi에서 보여준'물리적 길이'가 일치하지 않을 수 있다.

px 픽셀점.역시 상대 길이

in(inch)인치.물리적 길이

pt는 중국어로 파운드라고 하는데 1/72인치와 같다.물리적 길이

sp(눈금과 무관한 픽셀): dp와 유사하지만 사용자의 글꼴 크기 설정에 따라 축소할 수 있으며 안드로이드에서 글꼴을 설정할 때 사용합니다.

density 밀도.이것은 위에서 말한 것을 참고할 수 있는데 pixelRatio와 가깝고 약 DPI/160과 같다.

pixelRatio 장치 픽셀 비율.PixelRatio.get()를 통해

획득

PPI(pixels per inch) 이미지 해상도(인치당 포함된 픽셀 수, 대각선 가리킴)

DPI(dots per inch) 인쇄 정밀도(인치당 인쇄 가능한 포인트 수, 가로 표시 높이)

해상도: 가로 세로 2방향의 픽셀점 수량, 흔한 480X800750X1334

화면 크기: 화면 대각선의 길이(cm).컴퓨터와 텔레비전은 같은 이치이다.

그래서 우리는 1dp=(1*density)px, 반대로 1px=(1/density)dp를 알 수 있다.
그렇다면 RN에 너비가 1px인 분할선을 어떻게 설정합니까?

width: 1 / PixelRatio.get()

이렇게 하면 돼!
또한, 하나의 장비의 폭과 높이를 우리는 이렇게 얻을 수 있다.

width: Dimensions.get('window').width,
height: Dimensions.get('window').height,

그럼 이게 받은 넓이가 뭘까요?우리는 아이폰6s를 출력할 수 있다. 이 값은 width:375,height:667이다. 6s의density는 2이기 때문에 우리는 이것이 얻은 폭이 dp라는 것을 안다.
적합 방안
그래서 여기 RN의 어댑터 방안은 6, 6s를 예로 들면 UI 디자인 원형: 아이폰6 해상도 기반: 1334x750px;화면 크기: 4.7인치 DPI: 326dpi(약 320dpi, density=2)

import {Dimensions} from 'react-native';

const deviceWidthDp = Dimensions.get('window').width;
const uiWidthPx = 750;

export default function px2dp(uiElementPx) {
  return uiElementPx * deviceWidthDp / uiWidthPx;
}

deviceWidthDp는 현재 실행 중인 장치의 너비, uiWidthPx는 UI 설계도의 너비, uiElementPx 설계도에 표시된 요소의 px 값입니다.예를 들어, 한 장의 이미지 UI 마크업 너비가 200x400인 경우

<Image style={{width:px2dp(200),height:px2dp(400)}} source=xxx />

기타
우리는 자주 사용하는 도구류를 함께 쓸 수 있습니다:Screen Util.js

import {Dimensions, Platform, PixelRatio} from 'react-native'

export default {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  onePixel: 1 / PixelRatio.get(),
  STATUSBAR_HEIGHT: (Platform.OS === 'ios' ? 20 : 0),
  APPBAR_HEIGHT: (Platform.OS === 'ios' ? 44 : 56),
}

주의해야 할 것은: 만약 이 도구 클래스와 호출자가 하나의 가방 아래에 없다면, 우리는 도구 클래스 아래에 index를 써야 한다.js를 내보내야 합니다. 그렇지 않으면 찾을 수 없습니다.

import ScreenUtil from './ScreenUtil'
...

export {ScreenUtil};

사용할 때 바로: ScreenUtil.width하면 돼!
또 하나 질문은 STATUSBAR_HEIGHT과APPBAR_HEIGHT입니다.iOS 화면 좌표는 상태 표시줄을 포함하기 때문에 iOS 환경에서 구성 요소를 실행하면 상태 표시줄 아래에 그려집니다. 즉 상태 표시줄과 겹쳐집니다. 안드로이드는 그렇지 않습니다. 상태 표시줄 아래에 그려집니다.
위 코드는 StackNavigator/Header에 있습니다. 특히 저희가 Header 제목 표시줄을 사용자 정의할 때 paddingTop:STATUSBAR_HEIGHT를 설정해야 합니다. 이렇게 하면 iOS에서 상태 표시줄 아래에 그리는 문제를 피할 수 있습니다!
참고 사항: React Native의 기본 단위와 레이아웃 적응 방안react-native 단위 환산(px,pt,dp,ppi) dpi,dip,해상도,화면 크기,px,density 관계 및 환산