[React-Native] 리액트 네이티브 Keyboard (키보드 제어 밑 속성)

1. Keyboard

키보드 모듈의 이벤트를 감지하고 처리 (열리고 닫히는 것 혹은 크기 및 위치)

import {Keyboard} from 'react-native';

useEffect(()=> {
	const showSubscription = Keyboard.addListener('keyboardDidshow', () => {
		// 키보드 열림 감지 내용 작성
	});
	
	return () => {
		showSubscription.remove(); // 이벤트 리스너 제거
		// Keyboard.removeAllListeners('keyboardDidShow'); 특정이벤트의 모든 리스너 제거
		// Keyboard.dismiss(); 키보드 강제 닫기
		// Keyboard.isVisible(); 키보드가 마지막으로 표시되었던 시점인지 여부 boolean
		// Keyboard.metrics(); 키보드 메트릭 반환 KeyboardMetrics | undefined;
		// 매트릭은 아래에 자세희 설명
	}
},[]);

// 타입은 아래와 같다.
addListender: (
 eventType: KeyboardEventName,
 listener: KeyboardEventListener,
) => EmitterSubscription;

 

다음과 같은 종류의 함수들이 있다.

keyboardDidShow  // 키보드 열림 이벤트
kwyboardDidHide  // 키보드 닫힘 이벤트
keyboardWillShow // 키보드 표시 시작 이벤트
keyboardWillHide // 키보드 숨김 시작 이벤트

// ios
keyboardWillChangeFrame  // 키보드 프레임 변경이 시작될 때 발생
keyboardDidChangeFrame   // 키보드 프레임 변경이 완료 된 후 발생

 

키보드 높이 얻기

const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (event) => {
  setKeyboardHeight(event.endCoordinates.height);
});

키보드 높이에 따라 UI 조정(iOS)

const willChangeFrameListener = Keyboard.addListener('keyboardWillChangeFrame', (event) => {
  const { endCoordinates } = event;
  setKeyboardHeight(endCoordinates.height);
});

 

scheduleLayoutAnimation 으로 애니메이션 추가.

    const showListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      (event) => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        setKeyboardHeight(event.endCoordinates.height);
      }
    );

    const hideListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      () => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        setKeyboardHeight(0);
      }
    );

 

키보드 매트릭이란?

startCoordinates        : 키보드가 시작되는 위치 정보.
endCoordinates          : 키보드가 끝나는 위치 정보 (보통 이 값을 사용).
endCoordinates.height   : 키보드의 높이.
endCoordinates.screenX, endCoordinates.screenY   : 키보드가 화면에서 차지하는 위치.
duration                : 키보드가 열리거나 닫히는 데 걸리는 시간(밀리초 단위).
easing                  : 애니메이션의 이징(easing) 정보.

 

키보드 매트릭 설정

    const showListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      (event) => {
        const { endCoordinates, duration, easing } = event;
        setKeyboardMetrics({
          height: endCoordinates.height,
          x: endCoordinates.screenX,
          y: endCoordinates.screenY,
          duration,
          easing,
        });
      }
    );