[React Native] IOS에서의 키보드 내리기

Android에서는 Back키를 통해 키보드를 내릴 수 있지만, IOS에서의 사용은 입력 칸이 아닌 다른 곳을 누르는 경우 텍스트 입력(키보드)이 취소되는 사용자 UX를 가지고 있다.

 

UI를 그릴 때 TouchableWithoutFeedback의 자식 뷰로 구성하게 되면,

키보드가 보여지는 상태에서 빈 공간 또는 자식 뷰를 터치할 경우 닫히도록 동작시킬 수 있다.

TouchableWithoutFeedback 컴포넌트는 자식 뷰를 1개만 가질 수 있으므로 다음처럼 전체 공간을 채우는 뷰를 추가하여 세부 UI를 구성해 줄 필요성이 있다.

import React, {Component} from 'react';
import { Keyboard, TouchableWithoutFeedback } from 'react-native';

class TestComponent extends Component {
  render() {
    return (
      <TouchableWithoutFeedback
        onPress={() => {
          Keyboard.dismiss();
        }}>
        <View
          style={{width: '100%', height: '100%', backgroundColor: '#bbbbbb'}}
        />
      </TouchableWithoutFeedback>
    );
  }
}

 

 

주의사항

TouchableWithoutFeedback 내부에 FlatList 또는 ScrollView를 구성하게 되면,

터치 이벤트를 가로채 스크롤이 먹통이 되는 증상이 있다. 

스크롤이 동작하게 되는 컴포넌트는 다음처럼 TouchableWithoutFeedback의 바깥쪽에 구성해주도록 하자 

import React, {Component} from 'react';
import { Keyboard, TouchableWithoutFeedback } from 'react-native';

class TestComponent extends Component {
  render() {
    return (
      <View style={{flex: 1, width: '100%', height: '100%'}}>
        <TouchableWithoutFeedback
          onPress={() => {
            Keyboard.dismiss();
          }}>
          <View
            style={{width: '100%', height: 200, backgroundColor: '#bbbbbb'}}
          />
        </TouchableWithoutFeedback>
        <ScrollView
          style={{flex: 1, alignSelf: 'stretch'}}
          contentInsetAdjustmentBehavior="automatic">
          <View
            style={{width: '100%', height: 400, backgroundColor: '#000000'}}
          />
          <View
            style={{width: '100%', height: 400, backgroundColor: '#333333'}}
          />
          <View
            style={{width: '100%', height: 400, backgroundColor: '#666666'}}
          />
          <View
            style={{width: '100%', height: 400, backgroundColor: '#aaaaaa'}}
          />
        </ScrollView>
      </View>
    );
  }
}