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 单次点击无效》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

更快速网站

更快速网站

Steve Souders / 2009年12月 / 42.00元

对于任何成功的网站来说,性能是至关重要的。但伴随着不断增长的丰富内容和Ajax的过度使用,如今的Web应用已经将浏览器推至性能极限。在本书中,Google的Web性能专家和前任雅虎首席网站性能官Steve Souders提供了宝贵的技术,来帮助你优化网站性能。 作者的上一本书是非常畅销的《High Performance Web Sites》,它透露了80%的网页加载时间是花在客户端,使网络......一起来看看 《更快速网站》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码