反応ネイティブでキーボードを隠す
テキスト入力をタップした場合、キーボードを再び閉じるために他の場所をタップできるようにしたい（ただしリターンキーではない）。私が読んだすべてのチュートリアルやブログ記事で、これに関する最もわずかな情報を見つけることができませんでした。
この基本的な例は、シミュレータで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を持っているかのように、ScrollViewでViewを置き換えることは正しい解決ではありません、キーボードが上がっている間それらをタップすることはキーボードを消すだけです。
正しい方法は、ViewをTouchableWithoutFeedbackでカプセル化してKeyboard.dismiss()を呼び出すことです。
編集：ScrollViewをkeyboardShouldPersistTaps='handled'と共に使用して、タップが子供によって処理されていない場合にのみキーボードを閉じることができるようになりました（つまり、他のtextInputまたはボタンをタップする）。
あなたが持っている場合
<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>
)
}
})
React NativeのKeyboard.dismiss()を使用します
更新された回答
React NativeはKeyboardで静的dismiss()メソッドを公開したため、更新されたメソッドは次のとおりです。
import { Keyboard } from 'react-native';
Keyboard.dismiss()
元の回答
React Nativeの dismissKeyboard Libraryを使用します。
私は非常に似たような問題を抱えていて、それを理解できなかったのは自分だけだと感じました。
ScrollViews
ScrollView、またはListViewのようにそれから継承するものがある場合、プレスまたはドラッグイベントに基づいてキーボードを自動的に閉じるプロップを追加できます。
支柱は keyboardDismissMode であり、none、interactive、またはon-dragの値を持つことができます。詳細については こちら をご覧ください。
通常のビュー
ScrollView以外のものを押してキーボードを閉じるには、単純なTouchableWithoutFeedbackを使用し、onPressにReact Nativeのユーティリティライブラリを使用させることができます dismissKeyboard toキーボードを消してください。
あなたの例では、次のようなことができます：
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つの子しか持つことができないため、上記のように、その下のすべてを1つのViewでラップする必要があります。
簡単な答えは、Viewの代わりにScrollViewを使用し、scrollableプロパティをfalseに設定することです（ただし、スタイルを調整する必要があるかもしれません）。
このように、キーボードは私がどこか他の場所をタップした瞬間に却下されます。これはreact-nativeの問題かもしれませんが、tapイベントはScrollViewsでのみ処理されるように見えます。
編集：jllodraに感謝します。別のテキスト入力を直接タップしてから外側にタップしても、キーボードは隠れません。
私はReactの初心者で、デモアプリを作成しているときにまったく同じ問題に遭遇しました。 onStartShouldSetResponder小道具（ here について説明しています）を使用している場合は、普通のReact.Viewを参考にしてください。この戦略に関するより経験豊富な反応者の考えを聞くことに興味があります/よりよいものがあるならば、これは私のために働いたものです：
containerTouched(event) {
this.refs.textInput.blur();
return false;
}
render() {
<View onStartShouldSetResponder={this.containerTouched.bind(this)}>
<TextInput ref='textInput' />
</View>
}
ここで注意すべき2つのことまず、{ here で説明したように、すべてのサブビューの編集を終了する方法はまだないため、ぼかしを行うにはTextInputを直接参照する必要があります。次に、onStartShouldSetResponderは、その上にある他のタッチ可能なコントロールによってインターセプトされます。そのため、コンテナビュー内のTouchableHighlightなど（別のTextInputを含む）をクリックすると、イベントがnotトリガされます。ただし、コンテナビュー内のImageをクリックしてもキーボードは消えます。
以下のように 反応 - ネイティブ から インポート keyboardをインポートすることができます。
import { Keyboard } from 'react-native';
そしてあなたのコードの中でこのようなことをする：
render() {
return (
<TextInput
onSubmit={Keyboard.dismiss}
/>
);
}
静的解体（）
アクティブなキーボードを閉じてフォーカスを外します。
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>
)
}
}
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it
アプローチ番号2
これを指摘してくれたuser @ ricardo-stuvenのおかげで、反応するネイティブドキュメントの example で見ることができるキーボードを消すもう一つのより良い方法があります。
単純なインポートKeyboardとそのメソッドを呼び出すdismiss()
React Native 0.39のScrollViewの使用法を更新しました
<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />
とはいえ、2つのTextInputボックスにはまだ問題があります。例えば。ユーザー名とパスワードのフォームは、入力を切り替えるときにキーボードを閉じるようになりました。 TextInputsを使用しているときにScrollViewを切り替えるときにキーボードを有効に保つためのいくつかの提案を得たいと思います。
私はちょうど最新のReact Nativeバージョン（0.4.2）を使ってこれをテストしました、そしてあなたが他の場所をタップするときキーボードは却下されます。
FYI： "onEndEditing"プロップに割り当てることでキーボードを消したときに実行されるコールバック関数を設定できます。
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>
)
}
}
私がReact Nativeの最新バージョンを間違えていないのであれば、タップすることでキーボードを消すことができるというこの問題を解決しました。
コンポーネントをTouchableWithoutFeedbackでラップすると、スクロール動作がおかしくなるなどの問題が発生する可能性があります。私は一番上のアプリをViewプロパティを埋めたonStartShouldSetResponderでラップすることを好みます。これにより、未処理のタッチをすべて処理してからキーボードを閉じることができます。重要なことに、ハンドラ関数はfalseを返すので、touchイベントは通常どおりに伝播されます。
handleUnhandledTouches(){
Keyboard.dismiss
return false;
}
render(){
<View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
<MyApp>
</View>
}
キーボード モジュールはキーボードイベントを制御するために使用されます。
import { Keyboard } from 'react-native'以下のコードをrenderメソッドに追加してください。
render() { return <TextInput onSubmitEditing={Keyboard.dismiss} />; }
あなたが使用することができます -
Keyboard.dismiss()
static dismiss（）アクティブなキーボードを閉じて、元のドキュメントに反応するようにフォーカスを外します。
keyboardShouldPersistTapsの中でScrollViewを使うことであなたは "処理された"を渡すことができます。これはドキュメントが '処理された'を使うことについて述べていることです：the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).ここで はそれが参照されるところです。
最初の輸入キーボード
import { Keyboard } from 'react-native'
それからTextInput内でonSubmitEditingプロップにKeyboard.dismissを追加します。次のようなものがあります。
render(){
return(
<View>
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
</View>
)
}
ScrollViewで使用
keyboardShouldPersistTaps="handled"
これはあなたの仕事をするでしょう。
あなたがこれを処理することができる多くの方法があります、それがその時react-nativeに含まれていなかったので上記の答えはreturnTypeを含まない。
1：ScrollView内でコンポーネントをラップすることで解決できます。デフォルトでは、ScrollViewはどこかを押すとキーボードを閉じます。しかしScrollViewを使用したいがこの効果を無効にしたいとします。 scrollView pointerEvents = 'none'にpointerEvent propを使用できます。
2：ボタンを押したときにキーボードを閉じたい場合は、react-nativeのKeyboardを使用できます。
import { Keyboard } from 'react-native' and inside onPress of that button, you can useKeyboard.dismiss（） '.
3：キーボードのリターンキーをクリックしてキーボードを閉じることもできます。注：キーボードの種類が数字の場合、リターンキーはありません。そのため、prop、returnKeyTypeをdoneに渡すことで有効にできます。または、onSubmitEditing={Keyboard.dismiss}を使用することもできます。リターンキーを押すたびに呼び出されます。また、フォーカスを失ったときにキーボードを消したい場合は、onBlur prop、onBlur = {Keyboard.dismiss}を使用できます。
keyboard.dismiss()を試してみてください。それは私のために働いた
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>
Keyboard.dismiss()はそれをします。しかし時々それは焦点を失うかもしれず、キーボードは参照を見つけることができないでしょう。最も一貫性のある方法は、textInputにref=_refを付けて、閉じる必要がある場合は_ref.blur()を、キーボードを戻す必要がある場合は_ref.focus()を実行することです。
以下は、キーボードを閉じて、タップされた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>
);
}