React-native dismissキーボードがフォーカスアウト/クリックされたとき、テキストフィールド外にある

Question

私は反応ネイティブです。私はテキストフィールド（入力）を持っています。ユーザーが入力フィールド以外の場所をクリックしたときに、キーボードを解除する必要があります。 TouchableWithoudFeedbackのようにここで提案したいくつかのソリューションを試しましたが、機能しませんでした。 また、私には分かりませんが、onFocus内の関数を使用することはできますが、onBlurやonEndEditingでは何もできませんでした ここに入力コンポーネントのコードを示します。

<InputGroup borderType='rounded' style={styles.inputGrp}> 
            <Input placeholder={'Password'} secureTextEntry={true} style={styles.input} 
              onChangeText={(pin1) => this.setState({pin1: pin1})} 
              value={this.state.pin1} 
              maxLength={8} 
            /> 

Answer 1

ユーザーがテキストの入力を完了したら、キーボードの終了ボタンを使用してキーボードを閉じることができます。

       <TextInput placeholder={'Password'} secureTextEntry={true} style={styles.input} 
             onChangeText={(pin1) => this.setState({pin1: pin1})} 
             value={this.state.pin1} 
             maxLength={8} 
             onSubmitEditing={()=> this.dismissKeyboardAction()}/> 

このメソッドはどこかに定義します。

dismissKeyboardAction() { 
    dismissKeyboard(); 
    } 

はまた

var dismissKeyboard = require('dismissKeyboard'); 

をインポートすることを忘れないでくださいあなたは、キーボードが表示されているときは常に、ユーザーがどこにも他のキーボードよりもタップしたときに、キーボードを閉じたい場合は、可能ないくつかの回避策があります。 keyboardWillShowメソッドとkeyboardWillHideメソッドを使用して、isKeyboardVisible = trueのような状態変数を設定および設定解除します。また、この状態変数に基づいて、trueの場合、絶対座標（高さ0から高さ - キーボード高さまで）で画面全体（透明なTouchableHighlightまたはTouchableWithoutFeedback）にオーバーレイをレンダリングし、tapで同じdismisskeyboard（）メソッドを呼び出します。あなたがここからこの

import Dimensions from 'Dimensions'; 
var height = Dimensions.get('window').height; 
    var width = Dimensions.get('window').width; 

のような画面の高さを取得することができます

何か

componentWillMount() { 
    if (Platform.OS === 'ios') { 
     Keyboard.addListener('keyboardWillShow', this.keyboardWillShow); //not supported on Android 
     Keyboard.addListener('keyboardWillHide', this.keyboardWillHide); //not supported on Android 
    } 
    else { 
     Keyboard.addListener('keyboardDidShow', this.keyboardWillShowAndroid); 
     Keyboard.addListener('keyboardDidHide', this.keyboardWillHideAndroid); 
    } 
} 
keyboardWillShow (e) { 
    let newSize = e.endCoordinates.height 
    this.setState({ 
     keyboardHeight: newSize, 
     isKeyboardVisible: true 
    }) 
    } 
keyboardWillHide (e) { 
    this.setState({ 
     keyboardHeight: 0, 
     isKeyboardVisible: false 
    }) 
    } 

のように、あなたはキーボードが表示されている場合にのみ、あなたのUIにわたって透明で触れることができるコンポーネントをレンダリングし、キーボードを消すことができますonPressメソッド。

Answer 2

解決策はこちらのフォームを<ScrollView keyboardShouldPersistTaps="handled" />で囲みます。 keyboardShouldPersistTapsは重要な部分です。 keyboardShouldPersistTapsの場合は「決して」になることもありますが、キーボードがあまりにも簡単に消える可能性があります。この解決策はhttps://stackoverflow.com/a/41429871/1828637で共有されました。