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

키보드를 닫지 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()

var dismissKeyboard = require('dismissKeyboard');

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

import { Keyboard } from 'react-native';

Keyboard.dismiss()

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>

import { Keyboard } from 'react-native';

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

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

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