如果我点击文本输入,我希望能够点击其他地方,以便再次关闭键盘(而不是返回键)。在我读过的所有教程和博客文章中,我都没有发现任何与此相关的信息
这个基本示例在模拟器中使用react native 0.4.2时仍然不起作用。还不能在我的iPhone上试用
<;视图样式={styles.container}>;
<;文本样式={style.welcome}>;
欢迎来到这里!
</文本>;
<;文本样式={style.instructions}>;
要开始,请编辑index.ios.js
</文本>;
<;文本样式={style.instructions}>;
按Cmd+R重新加载,{'\n'}
用于开发菜单的Cmd+D或shake
</文本>;
<;文本输入框
样式={{高度:40,边框颜色:“灰色”,边框宽度:1}
OneDediting={this.clearFocus}
/&燃气轮机;
</视图>;
如果您有keyboardType='numeric'
,键盘未关闭的问题会变得更严重,因为无法关闭它
将视图替换为ScrollView不是一个正确的解决方案,因为如果您有多个文本输入
s或按钮
s,在键盘打开时点击它们只会关闭键盘
正确的方法是使用无反馈触摸功能封装视图,并调用
键盘。dismission()
编辑:您现在可以使用ScrollView
和keyboardShouldPersistTaps='handled'
来关闭键盘,仅当点击不由孩子们处理时(即点击其他文本输入或按钮)
如果你有
<;视图样式={flex:1}}>;
<;text输入键盘类型='numeric'/>;
</视图>;
换成
<;ScrollView contentContainerStyle={{flexGrow:1}
键盘应为“已处理”
&燃气轮机;
<;text输入键盘类型='numeric'/>;
</滚动视图>;
或
从“react native”导入{Keyboard}
<;可触摸且无反馈按={Keyboard.discouse}可访问={false}>;
<;视图样式={flex:1}}>;
<;text输入键盘类型='numeric'/>;
</视图>;
</可触摸且无反馈>;
编辑:您还可以创建更高阶的组件来关闭键盘
从“React”导入React;
从“react native”导入{TouchableWithoutFeedback,键盘,视图};
const DismissKeyboardHOC=(Comp)=>;{
返回({children,…props})=>(
<;触控无反馈按={Keyboard.dismise}可访问={false}>;
<;Comp{…props}>;
{儿童}
<;/Comp>;
<;/touchable无反馈>;
);
};
const DismissKeyboardView=DismissKeyboardHOC(视图)
简单地像这样使用它
。。。
render(){
<;DismissKeyboardView>;
<;TextInput keyboardType='numeric'/>;
<;/DismissKeyboardView>;
}
注意:accessible={false}
是使输入表单继续通过画外音访问所必需的。视障人士会感谢你的