如果我点击一个文本输入，我希望能够点击其他地方，以便再次取消键盘(不是返回键)。在我读过的所有教程和博客文章中，我没有发现一丁点关于这方面的信息。
这个基本的例子在模拟器中的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'，键盘不解散的问题会变得更严重，因为没有办法解散它。
用ScrollView替换View不是一个正确的解决方案，因为如果你有多个textinput或按钮，在键盘打开时点击它们只会让键盘消失。
正确的方法是用TouchableWithoutFeedback封装视图并调用Keyboard.dismiss()
编辑:你现在可以使用带有keyboardShouldPersistTaps='handled'的ScrollView来只在点击没有被孩子处理的时候解散键盘。点击其他文本，输入或按钮)
如果你有
<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
改为
<ScrollView contentContainerStyle={{flexGrow: 1}}
keyboardShouldPersistTaps='handled'
>
<TextInput keyboardType='numeric'/>
</ScrollView>
or
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继续访问。视障人士会感谢你的!
