리액트 네이티브에서 키보드를 숨기는 방법

텍스트 입력란을 탭하면 키보드가 사라지려면 다른 곳을 탭할 수 있어야 합니다(리턴 키는 제외). 읽은 모든 자습서와 블로그에서는 이에 관한 가장 조각만한 정보도 찾지 못했습니다.

이 기본 예제는 아직 시뮬레이터의 react-native 0.4.2에서 제대로 작동하지 않습니다. 아직 iPhone에서 시도해보지 못했습니다.

<View style={styles.container}>
  <Text style={styles.welcome}>
    React Native에 오신 것을 환영합니다!
  </Text>
  <Text style={styles.instructions}>
    시작하려면 index.ios.js 파일을 편집하세요.
  </Text>
  <Text style={styles.instructions}>
    다시로드하려면 Cmd+R을 누르세요.{'\n'}
    개발 메뉴를 표시하려면 Cmd+D 또는 흔들어주세요.
  </Text>
  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onEndEditing={this.clearFocus}
  />
</View>

답변 1

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

또는

import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';
const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)

간단하게 다음과 같이 사용하세요

...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

참고: accessible={false}는 음성 안내를 통해 입력 양식에 계속 접근할 수 있도록하기 위해 필요합니다. 시각 장애인들이 감사할 것입니다!

답변 2

리액트 네이티브에서 키보드 숨기기
리액트 네이티브는 모바일 애플리케이션 개발을 위한 자바스크립트 기반의 프레임워크로, 사용자 인터페이스를 구축하는 데 매우 편리한 도구입니다. 키보드는 모바일 앱 사용 시 자주 사용되는 요소 중 하나이며, 종종 화면을 가려 사용성을 저하시킬 수 있습니다. 이에 따라 사용자에게 사용량에서 어느정도 통제권을 부여하기 위해 리액트 네이티브에서 키보드를 숨기는 방법에 대해 다루어보고자 합니다.
리액트 네이티브에서 키보드를 숨기는 기능은 `Keyboard` 컴포넌트의 `dismiss` 메서드를 사용하여 구현할 수 있습니다. 이를 이용하면 특정 이벤트 발생 시 키보드를 쉽게 숨길 수 있습니다.
먼저, 애플리케이션의 상태(state)를 관리하는 컴포넌트 파일에서 `Keyboard`를 import 해야 합니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.
```javascript
import { Keyboard } from 'react-native';
```
다음으로, 키보드를 숨기고자 하는 컴포넌트 내에서 키보드 숨기기 기능을 호출하는 함수를 정의해야 합니다. 이 예시에서는 `hideKeyboard`라는 함수을 생성합니다.
```javascript
const hideKeyboard = () => {
Keyboard.dismiss();
}
```
이제, 키보드를 숨기고자 하는 이벤트(버튼 클릭 등)가 발생했을 때 `hideKeyboard` 함수를 호출하면 키보드가 숨겨집니다.
위의 코드 예시에서는 `Keyboard.dismiss()` 메서드를 사용했지만, 다른 방법으로 키보드를 숨길 수도 있습니다. `TextInput` 컴포넌트를 감싸고 있는 `ScrollView`나 `FlatList` 등을 스크롤하여 키보드를 강제로 닫을 수도 있습니다.
이처럼 리액트 네이티브에서 키보드를 숨기는 방법은 매우 간단합니다. 사용자의 사용성을 향상시키기 위해 키보드를 숨길 수 있으므로, 애플리케이션의 품질을 높이고 사용자들에게 더 나은 경험을 제공할 수 있습니다.