React Native 小记 - TouchableOpacity 单次点击无效

栏目: IOS · Android · 发布时间: 6年前

内容简介:一般是焦点问题,解决方法:即在 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 单次点击无效》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法

数据结构与算法

卓滋德克 / 陈曙晖 / 清华大学出版社 / 2003-4-1 / 69.00

本书是一本介绍数据结构与算法的优秀书籍。 本书系统介绍了C++面向对象程序设计、算法复杂度、链表、栈、队列、递归、树、图、排序和查找算法、散列技术、数据压缩算法、内存管理等内容;尤其对递归算法进行了深入剖析。在附录中详细介绍了大O符号与标准模板库:在大多数章中提供了相应的实例分析和程序设计作业。 本书适合作为计算机软件专业或其他相关专业的教科书。对于需要参加计算机考试,......一起来看看 《数据结构与算法》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具