[React Native] 키보드 내리기 방법

React Native에서 화면에 이미 활성화되어 있는 키보드를 내리려면 React Native API에서 제공하는 키보드 모듈을 사용하면 됩니다.
Keyboard 모듈은 키보드를 제어하는 데 사용할 수 있는 몇 가지 메서드를 제공하는데요. 그 중 키보드를 내리기 위해서는 Keyboard.dismiss() 메서드를 사용하면 됩니다.

 

키보드 내리기 예제 1

특정 버튼을 클릭했을 때 키보드를 내리는 예제입니다.

import React from 'react';
import { View, TextInput, Button, Keyboard } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <TextInput placeholder="Type something..." />
      <Button title="btn" onPress={() => Keyboard.dismiss()} />
    </View>
  );
};

export default MyComponent;

위의 예시에서는 TextInput 컴포넌트와 Button 컴포넌트가 렌더링됩니다. 버튼을 탭하면 Keyboard.dismiss() 메서드를 호출하여 키보드가 내려갑니다.

 

키보드 내리기 예제 2

TextInput 입력창 외 다른 영역을 클릭했을 때 키보드를 내리는 예제입니다.

import React from 'react';
import { View, TextInput, Keyboard, Pressable } from 'react-native';

const MyComponent = () => {
  return (
    <Pressable style={{ flex: 1 }} onPress={() => Keyboard.dismiss()}>
      <View>
        <TextInput placeholder="Type something..." />
      </View>
    </Pressable>
  );
};

export default MyComponent;

TextInput 컴포넌트를 Pressable 컴포넌트로 감싸면 사용자가 TextInput 영역 외 아무 곳이나 탭하면 키보드가 내려갑니다.