react-native 에서 키보드 숨기기

질문 : 반응 네이티브에서 키보드 숨기기

---

텍스트 입력을 탭하면 키보드를 다시 닫기 위해 다른 곳을 탭할 수 있기를 원합니다 (하지만 리턴 키는 아님). 내가 읽은 모든 튜토리얼과 블로그 게시물에서 이것에 관한 정보 중 가장 작은 부분을 찾지 못했습니다.

이 기본 예제는 Simulator의 react-native 0.4.2에서 여전히 작동하지 않습니다. 아직 내 iPhone에서 시도 할 수 없습니다.

<View style={styles.container}>
  <Text style={styles.welcome}>
    Welcome to React Native!
  </Text>
  <Text style={styles.instructions}>
    To get started, edit index.ios.js
  </Text>
  <Text style={styles.instructions}>
    Press Cmd+R to reload,{'\n'}
    Cmd+D or shake for dev menu
  </Text>
  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onEndEditing={this.clearFocus}
  />
</View>

답변

---

키보드를 닫을 수있는 방법이 없으므로 keyboardType='numeric' 이 있으면 키보드가 닫히지 않는 문제가 더 심각해집니다.

View를 ScrollView로 바꾸는 것은 올바른 해결책이 아닙니다. textInput 이나 button 이 여러 개있는 경우 키보드가 위로있는 동안 탭하면 키보드 만 닫힙니다.

올바른 방법은 TouchableWithoutFeedback Keyboard.dismiss() 호출하는 것입니다.

편집 : 이제 keyboardShouldPersistTaps='handled' 와 함께 ScrollView 를 사용하여 탭이 자식에 의해 처리되지 않을 때만 키보드를 닫을 수 있습니다 (예 : 다른 textInputs 또는 버튼을 두드리기).

당신이 가지고 있다면

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>

다음으로 변경

<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>
}

참고 : VoiceOver를 통해 입력 양식에 계속 accessible={false} 시각 장애가있는 분들이 감사드립니다!

출처 : https://stackoverflow.com/questions/29685421/hide-keyboard-in-react-native