React Native / Dismissing the Keyboard, 빈공간 클릭 시 키보드 내리기

 

 

1. import에 TouchableWithoutFeedback, Keyboard 를 추가해준다.

import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback,Keyboard } from 'react-native';

 

 

 

2. TouchableWithoutFeedback 컴포넌트 추가

   : TouchableWithoutFeedback 컴포넌트로 전체 소스를 감싸준 후, onPress 함수에 Keyboard.dismiss(); 코드 추가

  return (
    <TouchableWithoutFeedback onPress={() => {
        Keyboard.dismiss();
        console.log('dismissed keyboard'); //console 확인용
    }}>
      <View style={styles.container}>
        { /*header*/}
        <Header></Header>
        <View style={styles.content}>
          {/* to form*/ }
          <AddTodo submitHandler={submitHandler}></AddTodo>
          <View style={styles.list}> 
            <FlatList 
              data={todos}
              renderItem={({ item }) =>(
                <TodoItem item={item} pressHandler={pressHandler}/>
              )}
            />
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>  // 전체를 감싸줘야함 
  );

 

 

 

 

new todo..외에 다른 공간 클릭시 키보드 사라짐