[react-native] 반응 네이티브에서 키보드 숨기기

텍스트 입력을 누르면 키보드를 다시 닫기 위해 다른 곳을 탭 할 수 있기를 원합니다 (반환 키는 아님). 내가 읽은 모든 자습서와 블로그 게시물에서 이것에 관한 약간의 정보를 찾지 못했습니다.

이 기본 예제는 시뮬레이터에서 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'않는 방법은 없기 때문에 키보드가 닫히지 않는 문제는 더 심각해집니다 .

여러 개의 textInputs 또는 buttons 가있는 것처럼 키보드를 켠 상태에서을 두드리면 키보드가 사라지는 것처럼 View를 ScrollView로 바꾸는 것은 올바른 해결책 이 아닙니다.

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

편집 : 이제 사용할 수 있습니다 ScrollViewkeyboardShouldPersistTaps='handled'탭이 아이에 의해 처리되지 않는 경우에만 키보드를 닫습니다 (즉, 다른 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>
}

참고 :는 accessible={false}VoiceOver를 통해 입력 양식에 계속 액세스 할 수 있도록하는 데 필요합니다. 시각 장애인은 감사합니다!


답변

이것은 방금 업데이트 되고 문서화되었습니다 ! 더 이상 숨겨진 트릭이 없습니다.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

https://github.com/facebook/react-native/pull/9925


답변

맞춤 해고에 사용

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})


답변

반응 네이티브 사용 Keyboard.dismiss()

업데이트 된 답변

React Native는에 정적 dismiss()메소드를 노출 시켰 Keyboard으므로 업데이트 된 메소드는 다음과 같습니다.

import { Keyboard } from 'react-native';

Keyboard.dismiss()

원래 답변

React Native의 dismissKeyboard라이브러리를 사용하십시오 .

나는 매우 비슷한 문제가 있었고 그것을 얻지 못한 유일한 사람처럼 느꼈습니다.

ScrollViews

당신이있는 경우 ScrollView유사한 그것으로부터 상속는 것을, 또는 아무것도 ListView, 당신이 자동으로 눌러 또는 드래그 이벤트를 기반으로 키보드를 기각하는 소품을 추가 할 수 있습니다.

소품은 keyboardDismissMode및의 값을 가질 수 있습니다 none, interactive또는 on-drag. 자세한 내용은 여기참조하십시오 .

정기 조회

당신이 아닌 다른이있는 경우 ScrollView와 키보드를 닫으려면 어떤 프레스 싶습니다, 당신은 간단하게 사용할 수 있습니다 TouchableWithoutFeedback및이 onPress사용 원주민의 유틸리티 라이브러리 반작용 dismissKeyboard당신을 위해 키보드를 기각한다.

귀하의 예에서 다음과 같이 할 수 있습니다.

var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library.

// Wrap your view with a TouchableWithoutFeedback component like so.

<View style={styles.container}>

  <TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }>

    <View>

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

    </View>

  </TouchableWithoutFeedback>

</View>

참고 : TouchableWithoutFeedback하나의 자식 만 가질 수 있으므로 View위에 표시된 것처럼 그 아래에있는 모든 것을 하나의 랩으로 묶어야합니다 .


답변

간단한 대답은 View 대신 ScrollView를 사용하고 scrollable 속성을 false로 설정하는 것입니다 (스타일을 조정해야 할 수도 있음).

이렇게하면 다른 곳을 두드리는 순간 키보드가 사라집니다. 이것은 반응 네이티브의 문제 일 수 있지만 탭 이벤트는 ScrollViews에서만 처리되는 것으로 보이며 이는 설명 된 동작으로 이어집니다.

편집 : jllodra에게 감사드립니다. 다른 텍스트 입력을 직접 탭한 다음 외부로 탭하면 키보드가 여전히 숨겨지지 않습니다.


답변

아래와 같이 반응 네이티브 에서 가져올 수 있습니다 .keyboard

import { Keyboard } from 'react-native';

코드에서 다음과 같이 될 수 있습니다.

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

정적 해제 ()

활성 키보드를 닫고 초점을 제거합니다.


답변

저는 React를 처음 접했고 데모 앱을 만드는 동안 똑같은 문제가 발생했습니다. onStartShouldSetResponder소품 ( 여기에서 설명 ) 을 사용하면 평범한 낡은 부분을 만질 수 있습니다 React.View. 이 전략에 대한 경험이 풍부한 React-ers의 생각을 듣고 궁금합니다.

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

여기에 주목해야 할 2 가지. 먼저 여기 에서 논의한 것처럼 아직 모든 하위 뷰의 편집을 종료 할 수있는 방법이 없기 때문에 TextInput직접 흐리게 처리 하기 위해 직접 참조해야 합니다. 둘째, 그 onStartShouldSetResponder위에 다른 터치 가능한 컨트롤이 인터셉트됩니다. 따라서 컨테이너보기에서 TouchableHighlight등을 클릭하면 이벤트가 트리거 되지 않습니다 . 그러나 컨테이너보기 내 에서을 클릭하면 여전히 키보드가 사라집니다.TextInputImage