React Native 키보드 숨기기 방법

Auto hide the keyboard on tap

TextInput 관련해서 상당히 거슬리는 문제가 있다. 그건 바로 키보드가 사라지지 않는 문제인데

사용자가 직접 뒤로가기 버튼을 누르거나 네비게이터를 통해 페이지를 이동하지 않는 이상 사라지지 않는다.

나는 키보드가 밑에서 올라왔을 때 키보드를 제외한 다른 공간을 클릭하면 자동으로 키보드가 내려가도록 하고 싶었다.

여기에는 상당히 많은 접근법이 있는데, 그 중 가장 괜찮은 방법은 전체 페이지를

TouchableWithoutFeedback으로 감싸주고 클릭이벤트가 발생할 때 dismissKeyboard()를 호출해주는 것이다.

하지만 다행스럽게도 최근의 리액트 네이티브는 이 문제를 해결하고 상당히 수월한 해결법을 제시했다.

그냥 인풋 필드를 ScrollView로 감싸고 scrollEnabled prop을 false로 하는 것이다.

<ScrollView

scrollEnabled={false}

>

<TextInput ... />

</ScrollView>

이런식으로 텍스트 인풋을 ScrollView로 감싸준 후 실제 적용을 해보면 신기하게도 잘 동작한다.

키보드쪽을 제외한 나머지 공간을 탭해보면 자동으로 키보드가 내려간다.

위 글은

https://blog.brainsandbeards.com/react-native-keyboard-handling-tips-a2472b74c114

에서 Auto-hide the keyboard on tap쪽 글을 번역한 글이다.

링크로 들어가보면 키보드 관련 팁들이 많은듯.

다른 방법들은 아래의 링크를 참고하면 될 것 같다.

https://stackoverflow.com/questions/29685421/react-native-hide-keyboard