React Native 앱을 반응형으로 만드는 방법

몇 주 전에 Dev.to에 첫 번째 기사를 게시했는데 다른 개발자가 다양한 화면 크기에서 내 앱의 일관성을 어떻게 보장할 수 있는지 물었습니다.

나는 빠른 답장을 썼지만 오늘은 응답성이 모든 React Native 개발자가 가장 먼저 생각하는 것 중 하나이기 때문에 그것에 대해 더 이야기하기로 결정했습니다.
처리해야 합니다.

플렉스박스 사용

React Native의 flexbox는 제가 React Native를 좋아하는 이유 중 하나입니다.
flex 및 flexDirection 2개의 간단한 속성으로 원하는 모든 종류의 레이아웃을 쉽게 만들 수 있습니다.

결국 레이아웃은 화면 크기에 완벽하게 적응합니다. React Native documentation에서 인용

Flexbox is designed to provide a consistent layout on different screen sizes.

따라서 어디에서나 flexbox를 사용하고 절대 위치를 피하십시오.

하드 값을 피하십시오

하드 값이란 다음을 의미합니다.

const container = {
    width: 100,
    height: 300,
};

그리고 대부분의 경우 하드 값(특히 큰 값)은 다음으로 이어질 것입니다.



대신 가능한 한 많이 %를 사용합니다.

const container = {
    width: "10%",
    height: "30%",
};

하드 값 조정

때로는 하드 값을 피할 수 없어서 사용해야 할 때 내 .

그리고 프로젝트에서 쉽게 설치하고 사용할 수 있도록 npm에 패키지를 만들었습니다.

정규화하지 않고

정규화로

react-native-normalize은 React Native 앱이 쉽게 반응하도록 도와주는 작고 간단한 패키지입니다.
normalize에 사용할 수 있도록 화면의 너비 또는 높이에 따라 값을 조정하는 기능width, height, top, bottom, fontSize, borderRadius,...이 함께 제공됩니다.

// on iPhone 8
normalize(100)          // = 100
normalize(50, 'height') // = 50

// on iPhone 5s
normalize(100)          // = 86
normalize(50, 'height') // = 43

// on iPhoneXs Max
normalize(100)          // = 110
normalize(50, 'height') // = 67

노치 다루기(iOS)

React Native에는 iPhone X, Xs...에서 노치와 하단 영역을 자동으로 피하는 SafeAreaView 구성 요소가 있지만 때로는 여러 가지 이유로 (레이아웃, 애니메이션 등) 사용할 수 없습니다. SafeAreaView .

iPhoneX, Xs,... 노치 및 하단 영역을 처리하는 데 도움이 되는 몇 가지 유용한 기능과 함께 제공되는 라이브러리인 react-native-iphone-x-helper 을 사용할 때. 내가 가장 많이 사용하는 함수는 getStatusBarHeight 및 getBottomSpace 2가지입니다.

안드로이드 치수

안드로이드에서 Dimensions.get('window').height sometimes returns the wrong value .
반환된 높이를 사용하여 레이아웃 계산을 수행하면 몇 가지 문제가 발생할 수 있습니다.

그래서 화면의 실제 너비와 높이(소프트 메뉴 표시줄과 같은 요소 포함), 소프트 메뉴 높이 및 상태 표시줄 높이를 제공하는 패키지인 react-native-extra-dimensions-android 을 사용합니다.

다른 화면에서 테스트

나는 보통 iPhone 8 Emulator에서 내 앱을 테스트하지만 구현을 완료하면 3가지 다른 화면 크기에서 테스트합니다.

iPhone5s(소)

iPhone8(미디엄)

iPhoneXs Max(빅)

따라서 앱이 이 3가지 화면 크기에서 멋지게 보인다면 오늘날 대부분의 휴대전화에서도 잘 보일 것이라고 확신할 수 있습니다.