[RN공부하기] [12]Dismissing the Keyboard

React Native에서 안드로이드 폰, 아이폰 모두 동일한 UX로 현재 텍스트 필드 외 빈 공간을 탭할 경우 올라와 있는 키보드를 내리는 액션을 제공하기 위해서는 어떻게 해야할까?

 

(1) 사용 될 컴포넌트 : TouchableWithoutFeedback, Keyboard

https://reactnative.dev/docs/touchablewithoutfeedback

TouchableWithoutFeedback · React Native

https://reactnative.dev/docs/keyboard

Keyboard · React Native

[Touchable 정리]

• TouchableHighlight : 터치가 되었을 때 색을 어둡게 하거나 underlayColor prop를 활용하여 특정 색을 활성화 시킵니다.
• TouchableOpacity : 사용자가 터치 했을 때 버튼을 불투명하게 합니다.
• TouchableNativeFeedback : 터치 했을 때 잔물결이 일어납니다. 이런 잔물결을 사용자에게 피드백을 준다는 뜻으로 사용이됩니다.
• TouchableWithoutFeedback : 터치 했을 때 잔물결이 일어나지 않습니다.

 

TouchableWithoutFeedback는 터치 했을때 아무 효과도 주지 않게 하는 컴포넌트이기 때문에 잘 사용 되지 않는듯.

!주의할점
해당 컴포넌트는 하나의 자식 컴포넌트만 적용이 되므로 여러 개의 컴포넌트에 적용하고 싶을 때는 View 컴포넌트 안에 컴포넌트들을 넣어줘야한다.

//예시 코드
const App = () => { 
  const [count, setCount] = useState(0); 
  const onPress = () => { setCount(count + 1) } 
  return ( 
    <View style={styles.container}> 
      <TouchableWithoutFeedback onPress={onPress}> 
        <View style={styles.button}> 
          <Text>Touch Here</Text> 
        </View>
        <View style={styles.button}> 
          <Text>이렇게 하면 자식 View2개의 컨포넌트에 다 적용됨!</Text> 
        </View> 
      </TouchableWithoutFeedback> 
   </View> 
  ) 
}

View로 감싸줘야 여러개의 컴포넌트에 효과가 적용 되는듯 하다.

 

 

Keyboard.dismiss()를 키보드를 내릴 때 사용하는 빈 공간을 탭하는 이벤트를 리스닝하기 위해 TouchableWithoutFeedback를 사용한 부분에 주목해야 할 필요가 있다. TouchableWithoutFeedback는 표현 그대로 탭한 객체에 아무런 피드백을 주지 않고 이벤트만 리스닝하는 역할을 한다.
컨테이너 뷰를 TouchableWithoutFeedback로 감싸면 그 위에 올리는 객체 외 빈 공간들을 탭할 때 일어나는 이벤트를 리스닝할 수 있게 된다.
버튼을 탭할 때 별도의 이벤트를 _onPressSubmit으로 리스닝하는 부분을 보면 TouchableWithoutFeedback의 영향을 받지 않고 터치 객체 자신의 이벤트를 받을 수 있다는 점을 알 수 있다.

 

(2) 추가하기

//App.js
import { View, StyleSheet, Alert, TouchableWithoutFeedback, Keyboard  } from 'react-native';

//App.js에서

return (
    <TouchableWithoutFeedback onPress= { () => {
      Keyboard.dismiss();
    }}>
      <View style={styles.container}>
        <Header></Header>
        <View style={styles.contents}>
          <AddTodo SubmitHandler={SubmitHandler}></AddTodo>
          <Contents todos={todos} setTodos={setTodos}></Contents>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );

App전체에서 만약 바깥을 눌렸을때 Keyboard.dismiss 키보드를 내린다. 이것도 폰으로 테스트 해봐야됨.

 

 

 

 

//참고 출처 https://medium.com/@binarydiver/react-native-dismiss-keyboard-23ddafbb981d