React Native - 인풋이 키보드에 가려져요? KeyboardAvoidingView, KeyboardAwareFlatList

사용자 인풋이나 form작성 시 키보드에 가려져서 입력폼이 안보일 때가 있다.

그럼 KeyboardAvoidingView를 쓰자!

   <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
   >
      <TextInput
        ...
        autoFocus
      />
   </KeyboardAvoidingView>

 

안드로이드와 ios 플랫폼에 따라 조건처리해줘야댄다~ ios는 padding으로!

확인해보면 autoFocus 속성으로 인해 자동으로 포커스가되며 키보드에 더이상 가리지 않게 될 것.

그 외에도 View 컴포넌트처럼 style을 적용하거나 다른 방식으로 다룰 수 있다.

그래도 가린다면 높이 값을 더 설정하자!   👉 keyboardVerticalOffset

      <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : height}
            keyboardVerticalOffset={statusBarHeight+44}
        >   
            {...}
        </KeyboardAvoidingView>

사실 이쪽은 아직 잘 이해가 안됨.

KeyboardAvoidingView + 적절한 padding 값 조절로 해결하는 방법인데,

기기별로 statusBar 높이가 다르니 높이를 구해주는 라이브러리를 사용하든가... 해서 statusBarHeight + 원하는 높이로 구현하자.

44는 임의의 높이임!ㅇㅅㅇ