TextInput 입력시 Keyboard 창 닫기

입력을 해야하는 화면에서 TextInput에 focus 가 되면 

자동으로 Keyboard가 올라오는데, 아무곳이나 클릭했을때 이를 다시 내려가게 하고싶다.

TouchableWithoutFeedback, Keyboard 를 사용하여 간단하게 구현할 수 있다. \

 

해당 부분을 내리고 싶다!

 

TouchableWithoutFeedback 태그로 전체 영역을 감싼되 onPress 함수에 Keyboard.dismiss() 함수만 호출하면 간단하게 해제된다.

 

예제코드)

return (  
    <TouchableWithoutFeedback onPress={() => {
      console.log('dismissed keyboard')
      Keyboard.dismiss()
    }}>
      <View style={styles.container}>
        <Header/>
        <TextInput
            style={styles.input} 
            placeholder='Write something...'
            onChangeText={chageHandler}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}

생각보다 정말 간단하다.

 

습관적으로 javascript로만 해결하려고 했는데... 그냥 웬만하면 다 불러오면 된다. 허허 머쓱코쓱🙄