[解決済み] 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>

解決方法は？

キーボードが解除されない問題は、次のような場合に深刻になります。 keyboardType='numeric' を解除する方法がないためです。

ViewをScrollViewに置き換えることは、正しい解決策ではありません。 textInput または button の場合、キーボードが表示されているときにタップしてもキーボードは解除されるだけです。

正しい方法は、Viewを TouchableWithoutFeedback を呼び出して Keyboard.dismiss()

EDIT: これで ScrollView と共に 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>

EDIT：キーボードを解除するための高次コンポーネントを作成することもできます。

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で引き続き利用できるようにするために必要です。視覚障害者はあなたに感謝することでしょう。