在 react-native 中隐藏键盘 [英] Hide keyboard in react-native
问题描述
如果我点击文本输入,我希望能够点击其他地方以再次关闭键盘(虽然不是返回键).在我阅读的所有教程和博客文章中,我都没有找到任何与此相关的信息.
If I tap onto a textinput, I want to be able to tap somewhere else in order to dismiss the keyboard again (not the return key though). I haven't found the slightest piece of information concerning this in all the tutorials and blog posts that I read.
这个基本示例仍然不适用于模拟器中的 react-native 0.4.2.还不能在我的 iPhone 上试用.
This basic example is still not working for me with react-native 0.4.2 in the Simulator. Couldn't try it on my iPhone yet.
<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,{'
'}
Cmd+D or shake for dev menu
</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onEndEditing={this.clearFocus}
/>
</View>
推荐答案
如果你有 keyboardType='numeric'
,键盘不关闭的问题会变得更严重,因为没有办法关闭它.
The problem with keyboard not dismissing gets more severe if you have keyboardType='numeric'
, as there is no way to dismiss it.
用 ScrollView 替换 View 不是正确的解决方案,就像您有多个 textInput
或 button
一样,在键盘启动时点击它们只会关闭键盘.
Replacing View with ScrollView is not a correct solution, as if you have multiple textInput
s or button
s, tapping on them while the keyboard is up will only dismiss the keyboard.
正确的做法是用TouchableWithoutFeedback
封装View,并调用Keyboard.dismiss()
Correct way is to encapsulate View with TouchableWithoutFeedback
and calling Keyboard.dismiss()
您现在可以将 ScrollView
与 keyboardShouldPersistTaps='handled'
一起使用,仅在子项未处理点击时关闭键盘(即点击其他文本输入或按钮)
You can now use ScrollView
with keyboardShouldPersistTaps='handled'
to only dismiss the keyboard when the tap is not handled by the children (ie. tapping on other textInputs or buttons)
如果你有
<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>
您还可以创建一个高阶组件来关闭键盘.
You can also create a Higher Order Component to dismiss the keyboard.
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 访问.视障人士会感谢你的!
NOTE: the accessible={false}
is required to make the input form continue to be accessible through VoiceOver. Visually impaired people will thank you!
这篇关于在 react-native 中隐藏键盘的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!