解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题

原创 2017年01月24日 10:03:57
大家好,今天讲下在开发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>

解决点击空白处键盘关闭的问题:

在点击事件中如果调用关闭键盘API就可以,使用也很简单,先引入

var dismissKeyboard = require('dismissKeyboard');

在点击事件中调用

dismissKeyboard();

注意:如果点击事件控件使用的是TouchableOpacity,如果不想看到点击效果的话,记得设置激活的透明度为1.0,OK!今天就到这里!
版权声明:本文为博主原创文章,未经博主允许不得转载。

《React-Native系列》33、 键盘遮挡问题处理

最近在项目中,使用TextInput组件的时候,发现键盘弹出的时候,遮盖了表单。咨询了下做iOS的同学,他们的处理是计算键盘的高度和当前输入域的位置,将界面向上移动一段距离。那在ReactNative...
  • hsbirenjie
  • hsbirenjie
  • 2016年09月23日 21:08
  • 10061

React Native之弹框存在TextInput,输入框有焦点情况下需要点击两次才可触发事件-解决

Bug情况描述:React Native项目中,点击按钮A出现弹框浮层,弹框中需要TextInput输入数字,键盘浮起来;这时候点击 取消按钮L 或者 确定按钮R,只是让键盘收起,但是并没有触发 取消...
  • SpicyBoiledFish
  • SpicyBoiledFish
  • 2017年04月19日 10:33
  • 4847

解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题

大家好,今天讲下在开发RN过程中使用ScrollView控件出现的问题。 最初的开发需求是显示一个界面,这个界面有两个特点: 1)纵向很长,显示的内容有点多 2)界面的下半部分中有TextInpu...
  • wwt831208
  • wwt831208
  • 2017年01月24日 10:03
  • 5187

《React-Native系列》33、 键盘遮挡问题处理

最近在项目中,使用TextInput组件的时候,发现键盘弹出的时候,遮盖了表单。咨询了下做iOS的同学,他们的处理是计算键盘的高度和当前输入域的位置,将界面向上移动一段距离。那在ReactNative...
  • hsbirenjie
  • hsbirenjie
  • 2016年09月23日 21:08
  • 10061

ScrollView里面的EditText的点击空白处键盘消失的问题

关于EditText的点击空白处键盘消失的问题,我相信大家都知道怎么做。那将EditText嵌套在ScrollView里面,点击空白处键盘消失就会出现一些问题。只有你点击在ScrollView以外的地...
  • qq_21229739
  • qq_21229739
  • 2016年02月01日 15:17
  • 981

点击屏幕空白处让键盘消失的方法

创建一个基于Singal View Application 的工程在.xib文件中拖入一个Text Field控件和一个Round Rect Button 控件关键的一步,            ...
  • zhuzhu_2005
  • zhuzhu_2005
  • 2013年09月13日 13:51
  • 880

解決PullToRefreshListView点击空白处让键盘消失

重写这个ListView,红色标记的是我添加的部分: /********************************************************************...
  • xiaoke815
  • xiaoke815
  • 2014年12月18日 10:27
  • 1220

点击屏幕空白处让键盘消失的方法

创建一个基于Singal View Application 的工程在.xib文件中拖入一个Text Field控件和一个Round Rect Button 控件关键的一步,              ...
  • chaoyuan899
  • chaoyuan899
  • 2013年09月12日 19:59
  • 4135

点击空白处,软键盘消失

一般直接使用如下方式即可 Java代码 @Override public boolean onTouchEvent(MotionEvent event) { ...
  • a_sid
  • a_sid
  • 2017年08月04日 10:47
  • 161

仿微信朋友圈回复信息-点击空白处软键盘以及回复布局消失

打开微信朋友圈,点击回复按钮,会立马跳出一个回复栏和一个软键盘,点击其他空白处这2个又消失了。这种功能我们怎么实现呢? 类似下面这种功能,由于用的是夜神模拟器,没有软键盘,大家可以自行脑补,或者去自...
  • qq_31852701
  • qq_31852701
  • 2016年11月05日 17:14
  • 998
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决React Native中ScrollView中控件获得焦点及点击空白处键盘消失的问题
举报原因:
原因补充:

(最多只允许输入30个字)