☰

react-nativeでキーボードを非表示にする 質問する

tag-icon • tag-icon reactjs react-native
react-nativeでキーボードを非表示にする 質問する

テキスト入力をタップした場合、キーボードを再び閉じるために別の場所をタップできるようにしたいです (ただし、リターンキーではありません)。私が読んだすべてのチュートリアルやブログ投稿で、これに関する情報を少しも見つけることができませんでした。

この基本的な例は、シミュレーターの 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>

ベストアンサー1

キーボードが閉じない問題は、 がある場合keyboardType='numeric'、閉じる方法がないため、さらに深刻になります。

textInputView を ScrollView に置き換えることは正しい解決策ではありません。複数のまたは がある場合button、キーボードが開いているときにそれらをタップすると、キーボードが閉じられるだけです。

正しい方法は、Viewをカプセル化してTouchableWithoutFeedback呼び出すことです。Keyboard.dismiss()

編集:タップが子によって処理されない場合 (つまり、他のテキスト入力またはボタンをタップした場合) にのみキーボードを閉じるためにScrollViewwithを使用できるようになりました。keyboardShouldPersistTaps='handled'

あなたが持っている場合

<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 を通じて引き続きアクセスできるようにするには、 が必要です。視覚障害のある人は感謝するでしょう!

おすすめ記事