内容简介:一般是焦点问题,解决方法:即在 ScrollView 标签内,根据情况设置其收到测试人员提交的 Bug:帐号密码输入完毕按返回键关闭键盘后,点击登录没反应,再点一次才执行登录操作。网上类似的情况还有 “当点击 TouchableOpacity 时,要点击两下才会触发 onPress() ”、“在 ScrollView 中 TouchableOpacity 需要在 TextInput 失去焦点后才能点击”等。作为一个 Android 开发者,看到情况描述,联想到是焦点问题。类似于 Android 原生开发的
一般是焦点问题,解决方法:即在 ScrollView 标签内,根据情况设置其 keyboardShouldPersistTaps
属性值为 always
或者 handled
。详细解决过程如下:
0x00 描述
收到测试人员提交的 Bug:帐号密码输入完毕按返回键关闭键盘后,点击登录没反应,再点一次才执行登录操作。网上类似的情况还有 “当点击 TouchableOpacity 时,要点击两下才会触发 onPress() ”、“在 ScrollView 中 TouchableOpacity 需要在 TextInput 失去焦点后才能点击”等。
0x01 问题查找
作为一个 Android 开发者,看到情况描述,联想到是焦点问题。类似于 Android 原生开发的『ListView 的 Item 中 包含 EditText Button 时:EditText 与 Button 如何获取焦点、无法点击、ListView 不能滑动等』。
由于我遇到的是 ScrollView 使用时出现的问题,查看下 scrollview 的官方文档
发现有个 keyboardShouldPersistTaps
的属性,用于处理此类情况。
此外,在 stackoverflow 上也搜索到相关的回答,说是 ListView 也有此属性, 但我本地 react-native-0.57.2 ListView 源码中并没有此属性。
0x02 解决方案
scrollview @ keyboardShouldPersistTaps
如果当前界面有软键盘,那么点击 ScrollView 后是否收起键盘,取决于本属性的设置。
-
'never'
(默认值),点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。 -
'always'
,键盘不会自动收起,ScrollView 也不会捕捉点击事件,但子组件可以捕获。 -
'handled'
,当点击事件被子组件捕获时,键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有TextInput 的情况下你应该选择此项。 -
false
,已过时,请使用'never'
代替。 -
true
,已过时,请使用'always'
代替。
经测试,使用 always
或者 handled
均可解决发生的问题,由于我这里是 ScrollView 内部存在多个 TextInput,故选择 handled
值。
示例代码:
<ScrollView style={styles.mScrollView} keyboardShouldPersistTaps={'handled'} > <Viewstyle={styles.root}> <Viewstyle={styles.userRoot}> <Textstyle={styles.userRootV1}>用户名:</Text> <Viewstyle={{ flex:1, borderBottomColor:'#f0f0f0', borderBottomWidth:1 }}> <LessBorderTextInput style={styles.userRootV2} multiline={false} placeholder={'请输入用户名'} placeholderTextColor={'#ccc'} autoFocus={false} onChangeText={(newText)=> this.updateUser(newText)} returnKeyType={'next'} onSubmitEditing={() => { this._input.focus(); }} /> </View> </View> <Viewstyle={styles.userPwdRoot}> <Textstyle={styles.userPwdRootV1}>密码:</Text> <Viewstyle={{ flexDirection:'row', flex:1, borderBottomColor:'#f0f0f0', borderBottomWidth:1, alignItems:'center', }}> <LessBorderTextInput style={styles.userPwdRootV2} placeholder={'请输入密码'} multiline={false} placeholderTextColor={'#ccc'} secureTextEntry={!this.state.showPwd} onChangeText={(newText)=> this.updatePwd(newText)} returnKeyType={'done'} ref={(c) => this._input = c} /> <TouchableOpacity onPress={()=> this._showPwd(!this.state.showPwd)}> <Image source={pwd_icon} style={styles.userPwdRootV3} /> </TouchableOpacity> </View> </View> <TouchableOpacity onPress={()=> _login()}> <Textstyle={styles.userSignIn}>登录</Text> </TouchableOpacity> </ScrollView>
其中 LessBorderTextInput
是我参考官方文档封装后无边框(方便实现各种 UI 设计要求)的 TextInput
,并且
增加了支持 ref
属性的功能
,可用于多处需要填写内容时直接在键盘上点击下一项即自动进入下一项的输入。参见博客的相关文章。
0x03 总结
发现问题,借助搜索 工具 能很快得到解决方案,我这里也特地把解决方法直接写到了文章的开头,至于如何解决问题,是给想了解原因的人准备的一个思路和说明。如果你有更好的见解,欢迎和我一起讨论。
如果有什么建议或者问题可以随时联系我,共同探讨学习:
以上所述就是小编给大家介绍的《React Native 小记 - TouchableOpacity 单次点击无效》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- angular2手动点击特定元素上的点击事件
- Android-View点击事件短时间重复点击的过滤
- Associated Objects 小记
- Flutter混合开发小记
- Associated Objects 小记
- Nginx配置小记
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。