[React-Native] 키보드의 크기의 정보를 받고 싶을 때

키보드의 높이의 정보를 가지고 작업을 할 때 유용합니다.

 

import

import { Keyboard } from 'react-native';

 

Custom Hooks

 

import {useState, useEffect} from "react";
import { Keyboard, KeyboardEvent } from 'react-native';

const useKeyboard = () => {
    const [keyboardHeight, setKeyboardHeight] = useState(0);

    function onKeyboardDidShow(e: KeyboardEvent) {
        setKeyboardHeight(e.endCoordinates.height);
    }
    function onKeyboardDidHide() {
        setKeyboardHeight(0)
    }

    useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);

        return () => {
            keyboardDidShowListener.remove()
            keyboardDidHideListener.remove()
        }
    },[]);

    return keyboardHeight

}
export default useKeyboard

 

사용법 

const keyH = useKeyboard(); // 현재 키보드의 높이가 저장됨

 

---

 

class 형

componentDidMount () {

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    //키보드가 올라 왔을 때
    //this._keyboardDidShow 함수 실행
    
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
    //키보드가 없을 때
    //this._keyboardDidHide 함수 실행

}

{...}

 _keyboardDidShow () {                //키보드 show 했을때 실행
    alert('Keyboard Shown'); 
    Height= e.endCoordinates.height;
  }

  _keyboardDidHide () {              //키보드 hide 했을때 실행
    alert('Keyboard Hidden');
  }

 

사용법

e.endCoordinates.height// 사용하면 키보드 높이를 가져온다.

 

 

참고

https://coding-hwije.tistory.com/53

[reactnative]키보드 켜졌을 때 꺼졌을 때, 높이를 어케알까(keyboard event,show,hide,height)

https://stackoverflow.com/questions/46587006/how-to-get-a-height-of-a-keyboard-in-react-native

How to get a height of a Keyboard in React-Native?