• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > React Native 小记 – TouchableOpacity 单次点击无效

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

    作者: 分类:前端开发 点击: 1,115 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      一般是焦点问题,解决方法:即在 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'}
      	>
      	<View style={styles.root}>
      		<View style={styles.userRoot}>
      			<Text style={styles.userRootV1}>用户名:</Text>
      			<View style={{
                                  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>
                          <View style={styles.userPwdRoot}>
                              <Text style={styles.userPwdRootV1}>密码:</Text>
                              <View style={{
                                  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()}>
      		<Text style={styles.userSignIn}>登录</Text>
      	</TouchableOpacity>
      </ScrollView>
      

      其中 LessBorderTextInput 是我参考官方文档封装后无边框(方便实现各种 UI 设计要求)的 TextInput ,并且增加了支持 ref 属性的功能,可用于多处需要填写内容时直接在键盘上点击下一项即自动进入下一项的输入。参见博客的相关文章。

      0x03 总结

      发现问题,借助搜索工具能很快得到解决方案,我这里也特地把解决方法直接写到了文章的开头,至于如何解决问题,是给想了解原因的人准备的一个思路和说明。如果你有更好的见解,欢迎和我一起讨论。

      如果有什么建议或者问题可以随时联系我,共同探讨学习:



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006218394.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    您的电子邮箱地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据