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

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

이 기본 예제는 시뮬레이터에서 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()

편집 : 이제 사용할 수 있습니다 ScrollView와 keyboardShouldPersistTaps='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

ScrollView대신 사용 View하고 keyboardShouldPersistTaps속성을 false로 설정하십시오 .

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>

어떤 사람이 여러 줄로 된 텍스트 입력을 해제하는 방법에 대한 실제 예제가 필요하다면 여기로 가십시오! 이것이 일부 사람들에게 도움이되기를 바랍니다. 문서는 여러 줄 입력을 전혀 무시하는 방법을 설명하지 않습니다. 적어도 그것을 수행하는 방법에 대한 구체적인 언급은 없었습니다. 실제로 스택에 여기에 게시하는 것은 여전히 ​​멍청한 일입니다. 누군가 이것이이 스 니펫이 작성된 실제 게시물에 대한 참조라고 생각하면 알려주십시오.

import React, { Component } from 'react'
import {
  Keyboard,
  TextInput,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
} from 'react-native'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      behavior: 'position',
    }
    this._keyboardDismiss = this._keyboardDismiss.bind(this)
  }

  componentWillMount() {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove()
  }

  _keyboardDidHide() {
    Keyboard.dismiss()
  }

  render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={this.state.behavior}
      >
        <TouchableOpacity onPress={this._keyboardDidHide}>
          <View>
            <TextInput
              style={{
                color: '#000000',
                paddingLeft: 15,
                paddingTop: 10,
                fontSize: 18,
              }}
              multiline={true}
              textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
              placeholder="Share your Success..."
              value={this.state.text}
              underlineColorAndroid="transparent"
              returnKeyType={'default'}
            />
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    )
  }
}

에 ScrollView대한 업데이트 된 사용법React Native 0.39

<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />

그러나 두 개의 TextInput상자 에는 여전히 문제가 있습니다 . 예. 입력 사이를 전환 할 때 사용자 이름과 비밀번호 형식으로 키보드가 사라집니다. TextInputs를 사용하는 동안 사이 를 전환 할 때 키보드를 활성 상태로 유지하기위한 제안을하고 싶습니다 ScrollView.

onPress사용할 수있는 이벤트를 제어하는 ​​경우 몇 가지 방법 이 있습니다.

import { Keyboard } from 'react-native'

onClickFunction = () => {
     Keyboard.dismiss()
}

스크롤을 사용할 때 키보드를 닫으려면

<ScrollView keyboardDismissMode={'on-drag'}>
     //content
</ScrollView>

더 많은 옵션은 사용자가 키보드 외부를 클릭 할 때입니다.

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>

const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

접근법 No # 2;

이것을 지적 해 주신 @ ricardo-stuven 사용자 덕분에 반응 네이티브 문서 의 예제 에서 볼 수있는 키보드를 해제하는 또 다른 더 좋은 방법이 있습니다 .

간단한 가져 오기 Keyboard및 메소드 호출dismiss()

구성 요소를 포장 TouchableWithoutFeedback하면 이상한 스크롤 동작 및 기타 문제가 발생할 수 있습니다. 나는 나의 맨 위의 응용 프로그램을 포장하는 것을 선호 View로 onStartShouldSetResponder채워 속성입니다.이 날 모든 처리되지 않은 접촉을 처리 한 후 키보드를 기각 할 수 있습니다. 중요하게, 핸들러 함수는 false를 리턴하므로 터치 이벤트가 정상으로 전파됩니다.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }

방금 최신 React Native 버전 (0.4.2)을 사용하여 이것을 테스트했으며 다른 곳을 누르면 키보드가 닫힙니다.

참고로, 키보드를 "onEndEditing"소품에 할당하여 키보드를 닫을 때 실행할 콜백 기능을 설정할 수 있습니다.

내가 실수하지 않으면 React Native의 최신 버전으로 탭하여 키보드를 해제 할 수있는이 문제가 해결되었습니다.

터치 가능한 구성 요소를 주변에 / 옆에 배치하는 것은 TextInput어떻습니까?

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

다음과 같이 전체 구성 요소를 포장하십시오.

import { TouchableWithoutFeedback, Keyboard } from 'react-native'

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>

나를 위해 일했다

https://facebook.github.io/react-native/docs/keyboard.html

사용하다

Keyboard.dismiss(0);

키보드를 숨길 수 있습니다.

키보드 모듈은 키보드 이벤트를 제어하는 ​​데 사용됩니다.

• import { Keyboard } from 'react-native'

• render 메소드에 아래 코드를 추가하십시오.

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

당신이 사용할 수있는 -

Keyboard.dismiss()

static dismiss () 활성 키보드를 닫고 반응 기본 문서에 따라 포커스를 제거합니다.

첫 수입 키보드

import { Keyboard } from 'react-native'

그런 다음 내부 에 소품 TextInput을 추가 하십시오 . 다음과 같은 것이 있어야합니다.Keyboard.dismissonSubmitEditing

render(){
  return(
    <View>
      <TextInput 
        onSubmitEditing={Keyboard.dismiss}
       />
    </View>
  )  
}

사용 keyboardShouldPersistTaps에 ScrollView문제를 다룬다는 사람들이 말하는 것을하는 "처리"에 전달할 수 있습니다 당신은있는 ScrollView를 사용하여 함께 제공됩니다. 이것이 '손잡이'사용에 대한 문서 의 내용입니다. the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). 여기 에서 참조됩니다.

에 ScrollView사용

keyboardShouldPersistTaps="handled" 

이것은 당신의 일을 할 것입니다.

당신이 이것을 처리 할 수있는 많은 방법이 있습니다. 위의 답변 returnType은 그 당시 반응 네이티브에 포함되지 않았으므로 포함하지 않습니다.

1 : 구성 요소를 ScrollView 안에 배치하여 해결할 수 있습니다. 기본적으로 ScrollView는 어딘가에 누르면 키보드를 닫습니다. 그러나 ScrollView를 사용하고 싶지만이 효과를 비활성화하려는 경우. pointerEvent prop을 사용하여 scrollView를 사용할 수 있습니다 pointerEvents = 'none' .

2 : 당신이 버튼을 누를 때에 키보드를 종료하려면, 당신은 사용할 수 있습니다 Keyboard에서react-native

import { Keyboard } from 'react-native' and inside onPress of that button, you can useKeyboard.dismiss () '.

3 : 키보드에서 리턴 키를 클릭 할 때 키보드를 닫을 수도 있습니다. 참고 : 키보드 유형이 숫자이면 리턴 키가 없습니다. 따라서 propKey, returnKeyType을 제공하여 사용하도록 설정할 수 있습니다 done. 또는을 사용할 수 있습니다 onSubmitEditing={Keyboard.dismiss}. 리턴 키를 누를 때마다 호출됩니다. 포커스를 잃을 때 키보드를 닫으려면 onBlur prop를 사용할 수 있습니다.onBlur = {Keyboard.dismiss}

Keyboard.dismiss()할 것입니다. 그러나 때로는 포커스를 잃을 수 있고 키보드가 심판을 찾지 못할 수도 있습니다. 가장 일관된 방법 ref=_ref은 textInput 에 a 를 넣고 해제 해야 _ref.blur()할 때와 _ref.focus()키보드를 다시 가져와야 할 때 수행하는 것입니다.

시도하십시오 keyboard.dismiss(). 그것은 나를 위해 일했다

다음은 키보드 해제 및 탭 텍스트 입력으로 스크롤하는 솔루션입니다 (keyboardDismissMode 소품으로 ScrollView를 사용하고 있습니다).

import React from 'react';
import {
  Platform,
  KeyboardAvoidingView,
  ScrollView
} from 'react-native';

const DismissKeyboard = ({ children }) => {
  const isAndroid = Platform.OS === 'android';
  const behavior = isAndroid ? false : 'padding';

  return (
    <KeyboardAvoidingView
      enabled
      behavior={ behavior }
      style={{ flex: 1}}
    >
      <ScrollView
        keyboardShouldPersistTaps={'always'}
        keyboardDismissMode={'on-drag'}
      >
        { children }
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default DismissKeyboard;

용법:

render(){
   return(
     <DismissKeyboard>
       <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
     </DismissKeyboard>
   );
}

이 패키지를 사용하십시오 react-native-keyboard-aware-scroll-view

해당 구성 요소를 루트 구성 요소로 사용

이 패키지 react-native-keyboard-aware-scroll-view에는 scrollView도 있으므로 이것을 추가해야합니다.

<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>