KeyboardAvoidingView · React Native
KeyboardAvoidingView · React Native
This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.
reactnative.dev
키보드 어보이딩 뷰(KeyboardAvoidingView)는 키보드가 나타날 때 키보드를 피하기 위해 뷰의 높이를 조정하는 React Native의 내장 컴포넌트입니다. 이 컴포넌트는 사용자가 키보드를 통해 정보를 입력해야 하는데 키보드로 인해 일부 콘텐츠가 가려질 수 있을 때 특히 유용합니다.
키보드 어보이딩 뷰(KeyboardAvoidingView)는 iOS와 Android 기기에서 서로 다른 키보드 동작에 적응해야 하므로 플랫폼마다 다르게 작동합니다. iOS에서는 키보드가 나타나면 기본적으로 컴포넌트의 높이가 조정되어 콘텐츠가 키보드에 가려지지 않도록 위로 이동합니다. Android에서는 컴포넌트가 키보드가 표시될 때 스크롤이 가능하도록 스크롤뷰 컴포넌트 안에 콘텐츠를 래핑합니다.
iOS에서 키보드 어보이딩 뷰(KeyboardAvoidingView)에는 패딩(padding)과 포지션(position)이라는 두 가지 동작이 있습니다. 패딩(padding) 동작은 키보드가 나타날 때 뷰 하단에 패딩(padding)을 추가하고, 포지션(position) 동작은 키보드와 함께 뷰를 위로 이동합니다. 패딩(padding) 동작은 뷰가 키보드에 가려지는 것을 방지하고 컴포넌트를 다시 렌더링하지 않도록 하므로 대부분의 사용 사례에 권장됩니다. 그러나 특정 레이아웃이나 애니메이션에는 포지션(position) 동작이 더 선호될 수 있습니다.
키보드 어보이딩 뷰(KeyboardAvoidingView)의 동작을 지정하기 위해 개발자는 키보드 수직 오프셋 프로퍼티를 사용할 수 있습니다. 이 프로퍼티를 사용하면 개발자가 키보드와 뷰 사이의 거리를 지정하여 뷰가 키보드를 피할 수 있도록 올바르게 배치할 수 있습니다. 각 플랫폼에 맞는 동작을 사용하면 개발자는 iOS 및 Android 기기 모두에서 앱이 사용자 친화적이고 접근하기 쉬운지 확인할 수 있습니다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0