在react native中隐藏键盘

如果我点击文本输入,我希望能够点击其他地方,以便再次关闭键盘(而不是返回键)。在我读过的所有教程和博客文章中,我都没有发现任何与此相关的信息

这个基本示例在模拟器中使用react native 0.4.2时仍然不起作用。还不能在我的iPhone上试用

<视图样式={styles.container}>
<文本样式={style.welcome}>
欢迎来到这里!
&lt/文本>
<文本样式={style.instructions}>
要开始,请编辑index.ios.js
&lt/文本>
<文本样式={style.instructions}>
按Cmd+R重新加载,{'\n'}
用于开发菜单的Cmd+D或shake
&lt/文本>
<文本输入框
样式={{高度:40,边框颜色:“灰色”,边框宽度:1}
OneDediting={this.clearFocus}
/&燃气轮机;
&lt/视图>

如果您有keyboardType='numeric',键盘未关闭的问题会变得更严重,因为无法关闭它

将视图替换为ScrollView不是一个正确的解决方案,因为如果您有多个文本输入s或按钮s,在键盘打开时点击它们只会关闭键盘

正确的方法是使用无反馈触摸功能封装视图,并调用键盘。dismission()

编辑:您现在可以使用ScrollViewkeyboardShouldPersistTaps='handled'来关闭键盘,仅当点击不由孩子们处理时(即点击其他文本输入或按钮)

如果你有

<视图样式={flex:1}}>
<text输入键盘类型='numeric'/>
&lt/视图>

换成

<ScrollView contentContainerStyle={{flexGrow:1}
键盘应为“已处理”
&燃气轮机;
<text输入键盘类型='numeric'/>
&lt/滚动视图>

从“react native”导入{Keyboard}
<可触摸且无反馈按={Keyboard.discouse}可访问={false}>
<视图样式={flex:1}}>
<text输入键盘类型='numeric'/>
&lt/视图>
&lt/可触摸且无反馈>

编辑:您还可以创建更高阶的组件来关闭键盘

从“React”导入React;
从“react native”导入{TouchableWithoutFeedback,键盘,视图};
const DismissKeyboardHOC=(Comp)=>{
返回({children,…props})=&gt(
<触控无反馈按={Keyboard.dismise}可访问={false}>
<Comp{…props}>
{儿童}
</Comp>
</touchable无反馈>
);
};
const DismissKeyboardView=DismissKeyboardHOC(视图)

简单地像这样使用它

。。。
render(){
<DismissKeyboardView>
<TextInput keyboardType='numeric'/>
</DismissKeyboardView>
}

注意:accessible={false}是使输入表单继续通过画外音访问所必需的。视障人士会感谢你的

发表评论