TextInput에 키보드 Enter 이벤트 설정하기

키보드에서 Enter(return)를 눌렀을 때 onSubmitEditing 속성으로 함수를 호출할 수 있다.

TextInput에 returnKeyType 속성은 키보드 완료 부분이 설정한 문자열로 보이게 설정할 수 있다.

const onPress = () => {
  // .. 실행할 함수
}


<TextInput
  placeholder="내용을 입력해주세요."
  style={styles.input}
  onSubmitEditing={onPress}
  returnKeyType="done"
/>

위 코드에선 done으로 설정했는데 iOS 한국어 키보드를 켜보면 "완료"로 번역되어 나온다. 

안드로이드에서는 체크 아이콘으로 설정되어있어서 설정할 필요는 없다.

returnKyeType 속성은 상황에 따라 다음과 같은 값들을 지정할 수 있다.

플랫폼 공통

• done : 완료
• go : 이동
• next : 다음
• search : 검색
• send : 보내기

iOS 전용

• default : 기본
• emergency-call : 긴급 통화
• google : 검색
• join : 가입
• route : 이동
• yahoo 검색

안드로이드 전용

• none : 일반
• previous : 뒤로

참고로 returnKeyType은 키보드가 닫혔다가 다시 열려야 반영되므로 시뮬레이터에서 리로드나 키보드를 닫은 뒤 다시 열어 확인해야 한다. 그리고 특정 OS 전용 값을 사용하지 않으면 오류가 발생하므로 Platform.OS에 따라 조건부 렌더링이 필요하다.