RN 키보드 이슈

심재·2024년 5월 9일
0

리엑트 네이티브

목록 보기
1/1

키보드가 올라오면서 입력 필드를 가리는 문제

KeyboardAvoidingView 사용하기: React Native에 내장된 KeyboardAvoidingView 컴포넌트를 사용하여 키보드가 활성화될 때 입력 필드를 자동으로 위로 밀어올릴 수 있습니다. 이 컴포넌트는 키보드가 올라올 때 자동으로 뷰를 조정하여 입력 필드를 가리지 않도록 합니다.예를 들어, MyPageScreen에서 SafeAreaTooltipOverlay와 NavigationHeader 사이에 KeyboardAvoidingView를 추가할 수 있습니다:
jsx
Copy code

<NavigationHeader title={"My Page"} handleGoBack={handleGoBack} />
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={{flex: 1}}>

...






behavior 속성은 플랫폼에 따라 조정할 수 있습니다. iOS는 일반적으로 "padding"을, Android는 "height"를 사용합니다.
ScrollView 사용하기: 폼의 입력 필드가 많은 경우 ScrollView를 사용하여 사용자가 필요에 따라 스크롤하여 숨겨진 입력 필드를 볼 수 있도록 할 수 있습니다. 이 방법은 사용자에게 더 많은 제어를 제공하고 키보드가 활성화되었을 때 자연스럽게 스크롤할 수 있게 합니다.ScrollView로 전체 또는 일부 레이아웃을 감쌀 수 있습니다:
jsx
Copy code

<NavigationHeader title={"My Page"} handleGoBack={handleGoBack} />


...





키보드가 표시될 때 스크린 크기 조정: 특정 경우에는 ScrollView나 KeyboardAvoidingView 외에도 키보드가 활성화될 때 전체 스크린 레이아웃을 조정해야 할 수 있습니다. 이는 더 복잡한 로직을 필요로 하지만, 키보드가 활성화될 때 발생하는 이벤트를 청취하고 그에 따라 상태를 업데이트하여 UI를 조정할 수 있습니다.
.

profile
언제나 개발중

0개의 댓글