解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
来源:互联网 发布:淘宝收货页面怎么p 编辑:程序博客网 时间:2024/06/13 13:01
from: http://blog.csdn.net/wwt831208/article/details/54705978?utm_source=itdadao&utm_medium=referral
大家好,今天讲下在开发RN过程中使用ScrollView控件出现的问题。
最初的开发需求是显示一个界面,这个界面有两个特点:
1)纵向很长,显示的内容有点多
2)界面的下半部分中有TextInput控件
要想满足第一个条件,首先想到的是将显示的这些内容最外层加上一层ScrollView控件包裹,经过测试,确实是可以的。
TextInput控件后面根了一个删除按钮,删除按钮默认隐藏,当TextInput中输入内容后,删除按钮显示,此时点击删除按钮时要删除TextInput中的内容,后来在测试时发现删除按钮就是点不中,其实就是不能获得焦点。
经过查资料,发现ScrollView控件中有个属性,keyboardShouldPersistTaps,先看下官网的讲解:
keyboardShouldPersistTaps enum('always', 'never', 'handled', false, true)
如果当前界面有软键盘,那么点击scrollview后是否收起键盘,取决于本属性的设置。(译注:很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将TextInput放到ScrollView中再设置本属性)
'never'(默认值),点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
'always',键盘不会自动收起,ScrollView也不会捕捉点击事件,但子组件可以捕获。
'handled',当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
false,已过期,请使用'never'代替。
true,已过期,请使用'always'代替。
也就是说只需要设置此属性为always就可以解决ScrollView中的子控件不能获得焦点的问题了,经过测试,问题确实解决了。
后来测试又说,希望在弹出键盘的时候,点击TextInput控件外面的空白的地方希望键盘能够收起(安卓上的键盘还好,键盘有收起键,Ios上没有获得至少我还没发现,有发现的告诉我)
好吧,测试的提出问题来了,那就得解决啊!!!
其实也很简单,在ScrollView中第一层先包一个点击事件,然后点击事件设为空实现就可以了,大概看起来的样子是这样的。
<ScrollView style={styles.flex_style} keyboardShouldPersistTaps={always}>
<TouchableOpacity activeOpacity={1.0} onPress={this.dismissKeyboardClick.bind(this)}>
//TextInput 控件相关
</TouchableOpacity>
</ScrollView>
注意:如果点击事件控件使用的是TouchableOpacity,如果不想看到点击效果的话,记得设置激活的透明度为1.0,OK!今天就到这里!
1)纵向很长,显示的内容有点多
2)界面的下半部分中有TextInput控件
要想满足第一个条件,首先想到的是将显示的这些内容最外层加上一层ScrollView控件包裹,经过测试,确实是可以的。
TextInput控件后面根了一个删除按钮,删除按钮默认隐藏,当TextInput中输入内容后,删除按钮显示,此时点击删除按钮时要删除TextInput中的内容,后来在测试时发现删除按钮就是点不中,其实就是不能获得焦点。
经过查资料,发现ScrollView控件中有个属性,keyboardShouldPersistTaps,先看下官网的讲解:
keyboardShouldPersistTaps enum('always', 'never', 'handled', false, true)
如果当前界面有软键盘,那么点击scrollview后是否收起键盘,取决于本属性的设置。(译注:很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将TextInput放到ScrollView中再设置本属性)
'never'(默认值),点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
'always',键盘不会自动收起,ScrollView也不会捕捉点击事件,但子组件可以捕获。
'handled',当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
false,已过期,请使用'never'代替。
true,已过期,请使用'always'代替。
也就是说只需要设置此属性为always就可以解决ScrollView中的子控件不能获得焦点的问题了,经过测试,问题确实解决了。
后来测试又说,希望在弹出键盘的时候,点击TextInput控件外面的空白的地方希望键盘能够收起(安卓上的键盘还好,键盘有收起键,Ios上没有获得至少我还没发现,有发现的告诉我)
好吧,测试的提出问题来了,那就得解决啊!!!
其实也很简单,在ScrollView中第一层先包一个点击事件,然后点击事件设为空实现就可以了,大概看起来的样子是这样的。
<ScrollView style={styles.flex_style} keyboardShouldPersistTaps={always}>
<TouchableOpacity activeOpacity={1.0} onPress={this.dismissKeyboardClick.bind(this)}>
//TextInput 控件相关
</TouchableOpacity>
</ScrollView>
解决点击空白处键盘关闭的问题:
在点击事件中如果调用关闭键盘API就可以,使用也很简单,先引入
var dismissKeyboard = require('dismissKeyboard');
在点击事件中调用
dismissKeyboard();
注意:如果点击事件控件使用的是TouchableOpacity,如果不想看到点击效果的话,记得设置激活的透明度为1.0,OK!今天就到这里!
阅读全文
0 0
- 解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
- 解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
- ScrollView里面的EditText的点击空白处键盘消失的问题
- React Native 解决ScrollView 上 TextInput 键盘遮挡问题
- 点击屏幕空白处让键盘消失的方法
- 点击屏幕空白处让键盘消失的方法
- android edittext点击空白处键盘消失
- android中点击任意空白处隐藏键盘的方法
- 解决React Native中ListView控件在ios上不能滑动的问题
- 解决android中点击对话框外部,对话框消失的问题
- 解决android中点击对话框外部,对话框消失的问题
- 点击空白键盘消失方法
- Delphi中当前获得焦点的控件
- 关于Android中Dialog点击屏幕外失去焦点消失的问题
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- React-native键盘遮挡输入框问题的解决
- Android 弹窗,失去焦点(点击空白处)消失的方法
- React Native 中scrollview滑动不到底部的解决方案一
- javaAPI(2)之StringBuffer类
- 数据库JDBC搭建
- vim教程
- SpringMVC引用properties文件变量
- 存储器的小知识
- 解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
- MyBatis笔记(二)
- 求给定字符串中最长回文序列
- 获取枚举备注List
- HDMI协议
- C++函数名后加const
- Android Studio签名打包安装失败
- Sping MVC用@ResponseBody返回json入门实例
- UVA