3시간 가량 찾아봤으나, 해법을 찾지 못함.
기본피쳐 확인
우선 device에 블루투스 외부키보드를 연결하고 https://en.key-test.ru/ 에서 ctrl, alt, shift 키가 각기 별도로 입력되는지 확인했다. 결과 device에서 각 키를 구분해서 인식한다는 것은 확인했다. 이제 react-native 에서 사용할 수 있는지만 확인하면 된다.
Keyboard 관련
https://reactnative.dev/docs/keyboard#addlistener
우선 React Native 에서 Keyboard는 외부 키보드가 아닌 화면에 뜨는 UI 키보드를 의미한다. 폰에서 keyboard 는 뜨는 시점과 사라지는 것, size가 중요하다. 즉 웹에서의 키보드와는 아예 다르다.
React 의 Keyboard 컴포넌트와 달리 addEventListener 에 추가할 수 있는 이벤트 종류가 적다. 우선 keydown 이벤트가 없어서, ctrl 키를 당연히 감지할 수 없다.
keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame
onKeyPress={(e) => {
if(e.nativeEvent.key == "Enter"){
...
}
react-native-keyevent 라이브러리 사용
https://github.com/kevinejohn/react-native-keyevent
마지막 커밋이 2년 전이라 큰 기대는 안했지만 역시나...
외부 키보드 검색시 연관성이 높게 나오는 라이브러리였으나, 일반 키도 감지하지 못했다.
node_modules 파일분석
node_modules > react > index.d.ts
내 KeyboardEvent
인터페이스 내에는 altKey
, ctrlKey
, shiftKey
속성이 있지만, node_modules > react-native > index.d.ts
에는 해당 속성이 없다... 즉 React Native 차원에서 ctrl 키를 별도로 감지하는게 불가능 할 가능성이 높다는 것.
stackoverflow 조사
마찬가지로 별 소득이 없었다. react native 로 검색해도 대다수는 react 문서가 나오고, 그나마 간간히 나오는 native 글에도 react 에서만 가능한 방법이 적혀있다던가 그런 식이다.
혹은 react native 에서는 안된다는 뜻.
https://stackoverflow.com/questions/43204272/react-native-key-board-events
배운 것
그나마 이번 조사를 통해 알게된 것들