反応ネイティブでキーボードを非表示

textinputをタップした場合、キーボードを再び閉じるために（リターンキーではなく）他の場所をタップできるようにしたいと思います。私が読んだすべてのチュートリアルとブログ投稿には、これに関する少しの情報も見つかりませんでした。

この基本的な例は、シミュレーターの反応ネイティブ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()

編集：を使用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>
        )
    }
})

React Nativeの Keyboard.dismiss()

更新された回答

React Nativeはで静的dismiss()メソッドを公開したKeyboardため、更新されたメソッドは次のとおりです。

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

元の回答

React Nativeの dismissKeyboardライブラリをます。

私は非常によく似た問題を抱えていて、それがうまくいかなかったのは私だけだと感じました。

ScrollViews

ScrollView、またはから継承するものがある場合は、ListViewプレスまたはドラッグのイベントに基づいてキーボードを自動的に閉じるプロップを追加できます。

小道具は、またはのkeyboardDismissMode値を持つことができます。詳しくはこちらをご覧ください。noneinteractiveon-drag

通常のビュー

a以外の何かがありScrollView、キーボードを閉じるために何か押したい場合は、シンプルな方法を使用しTouchableWithoutFeedbackて、onPressReact Nativeのユーティリティライブラリ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子は1つしか持てないため、View上記のように、その下にあるすべてのものを1つにラップする必要があります。

簡単な答えは、Viewの代わりにScrollViewを使用し、scrollableプロパティをfalseに設定することです（ただし、スタイルを調整する必要がある場合があります）。

このようにして、どこかをタップした瞬間にキーボードが非表示になります。これは、react-nativeの問題である可能性がありますが、タップイベントはScrollViewでしか処理されないようであり、説明されている動作につながります。

編集：jllodraに感謝します。別のTextinputを直接タップして外に出しても、キーボードは非表示になりません。

以下のように、react-nativeからインポート できます。keyboard

import { Keyboard } from 'react-native';

あなたのコードでは次のようになるでしょう：

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

静的dismiss（）

アクティブなキーボードを閉じ、フォーカスを削除します。

私はReactを初めて使用しましたが、デモアプリの作成中にまったく同じ問題に遭遇しました。onStartShouldSetResponder小道具（ここで説明）を使用すると、普通の古い物に触れることができますReact.View。この戦略に関するより経験豊富なリアクターの考えを聞いて興味があります/より良いものがある場合は、これが私にとってうまくいきました：

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

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

ここで2つの注意点があります。まず、ここで説明したように、すべてのサブビューの編集を終了する方法はまだないためTextInput、ぼかすために直接参照する必要があります。次に、はそのonStartShouldSetResponder上にある他のタッチ可能なコントロールによってインターセプトされます。したがって、コンテナビュー内でTouchableHighlight（別のを含むTextInput）をクリックしても、イベントはトリガーされません。ただし、Imageコンテナビュー内をクリックすると、キーボードが非表示になります。

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

ScrollViewforの更新された使用法React Native 0.39

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

ただし、2つの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に感謝します。この例で確認できる、キーボードを閉じる別のより良い方法があります。で、reactネイティブドキュメントので。

単純なインポート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.dismissしますonSubmitEditing。次のようなものが必要です。

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プロップを使用してscrollViewを実行できます pointerEvents = 'none'。

2：ボタンを押したときにキーボードを閉じたい場合はKeyboard、react-native

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

3：キーボードのReturnキーをクリックしてキーボードを閉じることもできます。注：キーボードタイプが数値の場合、Returnキーはありません。したがって、propにreturnKeyType toを指定することで有効にできますdone。または、次のように使用できonSubmitEditing={Keyboard.dismiss}ます。リターンキーを押すたびに呼び出されます。フォーカスを失ったときにキーボードを閉じたい場合は、onBlurプロップを使用できます。onBlur = {Keyboard.dismiss}

Keyboard.dismiss()それを行います。しかし、時々それはフォーカスを失い、キーボードは参照を見つけることができなくなります。最も一貫した方法はref=_ref、textInput にa を配置することです。これは、閉じる_ref.blur()必要があるとき、および_ref.focus()キーボードを元に戻す必要があるときに行います。

試してみてくださいkeyboard.dismiss()。それは私のために働いた

ここでは、キーボードを閉じてタップされたTextInputにスクロールするための私の解決策を示します（私はScrollViewをkeyboardDismissModeプロパティで使用しています）。

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>