[React Native] KeyboardAvoidingView

KeyboardAvoidingView

들어가며

• 리액트 네이티브(React Native)의 @KeyboardAvoidingView@ 컴포넌트에 대해 간단히 정리해 본다.

 

KeyboardAvoidingView

개념

• 키보드가 화면에 나타날 때 입력 필드 등의 UI가 가려지는 문제를 해결하기 위해 사용되는 컴포넌트
  
  • 키보드 레이아웃이 표시될 때, 자식 요소를 위로 올려서 입력창을 가리지 않도록 해준다.
• Android에서는 기본적으로 잘 처리되나, iOS에서는 그렇지 않아 이 컴포넌트를 이용하면 유용하다.

KeyboardAvoidingView가 적용된 모습 (iOS)

 

주요 속성

behavior

• 키보드가 나타날 때의 동작 방식을 조절할 수 있다.
• 플랫폼에 따라 동작이 다를 수 있기 때문에 @Platform.OS@를 통해 조건 분기해서 쓰는 것이 일반적이다.

옵션	설명
@padding@	키보드의 높이만큼 패딩을 추가해서 입력창이 가려지지 않게 해준다.
@height@	뷰의 높이를 줄여서 키보드를 피한다.
@position@	키보드가 나타날 때 @View@ 전체를 위로 이동시켜 입력창이 잘 보이도록 한다.

 

keyboardVerticalOffset

• 뷰가 키보드 위로 얼마나 떨어져 있게 할지 지정할 수 있다.
• 상태바(Status Bar), 헤더(Header) 등을 고려할 때 사용한다.

 

enabled

• 이 컴포넌트를 활성화할지의 여부를 지정할 수 있다.
• 기본값은 @true@이다.

 

사용 방법

• @KeyboardAvoidingView@는 다른 @View@를 감싸서 사용한다. 
  
  • 보통 @ScrollView@ 컴포넌트와 함께 사용한다.

import { ScrollView, KeyboardAvoidingView, TextInput, Platform } from 'react-native';

<ScrollView style={{ flex: 1 }}>
  <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} style={{ flex: 1 }}>
    <View>
      {/* 입력 필드 등 기타 UI */}
    </View>
  </KeyboardAvoidingView>
</ScrollView>

 

@ScrollView@에서 @flex: 1@을 스타일을 지정한 이유는 화면 전체를 차지하게 만들기 위해서이다. @KeyboardAvoidingView@에서 @flex: 1@ 스타일을 지정한 이유는 키보드 반응을 위한 전체 공간을 확보하여 스크롤 레이아웃을 안정시키기 위해서이다.

보통 iOS에서 더 자주 문제가 발생하므로, @behavior@를 iOS에서만 설정하는 방식이 일반적이다. (Android는 대부분 자동으로 키보드를 피해 UI를 조정하므로 별도로 설정할 필요가 없다.)

 

참고 사이트

KeyboardAvoidingView · React Native