一行代码解决Scrollview和TextInput焦点获取问题

news2024/11/13 14:36:55

前言

业务开发中搜索框和列表的组合页面应该是比较常见的场景,那么有什么坑呢?

最近在开发过程就遇到了一个问题,输入搜索关键词查询接口返回数据后,点击列表项并返回上个页面时,发现需要两次点击,纳尼?页面示意图如下

通过日志以及逻辑分析发现两个问题:

  • 1.第一次点击列表项无法触发onPress点击事件
  • 2.第一次点击其实是使输入框失去焦点并隐藏键盘

知道问题在哪就有解决问题的方向了:点击列表项使输入框自动失去焦点,并触发onPress点击事件。

尝试方案

  • 1.通过点击事件添加Keyboard.dismiss(),并使用输入框ref调用blur()方法
  • 2.通过使用Scrollview包裹整个页面,添加keyboardShouldPersistTaps={‘handled’}设置项(网上方案)

方案结果:

  1. 没有作用
  2. 没有效果,且上面的搜索框会一起滚动

最终方案

通过在技术群沟通,有位群友提出方案

scrollview 容器加 keyboardDismissMode=“on-drag”
实践后,并未解决此问题

最终通过尝试在列表Flatlist中添加属性keyboardShouldPersistTaps={'always'}成功解决

示例代码如下:

// 自定义输入框
<CustomizeSearchBar 
      value={searchText}
      actionPress={onActionPress}
      placeholder='请输入昵称/地址/姓名/手机号查询' onSearchChange={onSearchChange}/>
<FlatList
  keyboardShouldPersistTaps={'always'}
  style={{flex: 1}}
  data={addressList}
  renderItem={renderItem}
  ListEmptyComponent={<ListEmpty type={2} />}
  keyExtractor={(item) => item.id}
/>

附RN中文网对keyboardShouldPersistTaps的解释说明:

最后

写了Android和Flutter混合开发一年多,又开始写RN了,就想一个圆一样。

小伙伴们,你们现在是做RN,Flutter,原生,还是转行了?

欢迎大家在评论区留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/13123.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ConcurrentHashMap的transfer阅读

[TOC] 流程图 ConcurrenthashMap 的 transfer 主要是用于扩容重组阶段&#xff0c;当内部数组的容量值超过阈值时&#xff0c;将触发扩容重组&#xff0c; transfer 是该过程的主要实现。 相关概念 ConcurrentHashMap 中&#xff0c;使用一个字段复用了多种功能&#xff0c;…

Spring七天速成[精简版]:入门必看(一)收藏起来

“天生我材必有用&#xff0c;千金散尽还复来&#xff01;” ----------持续更新Spring入门系列知识点------------- 你的点赞、关注、评论、是我创作的动力&#xff01; -------希望我的文章对你有所帮助-------- 前言&#xff1a;其实学习编程从来没有捷径&#xff0c;只有…

传奇架设gom引擎常见问题

传奇架设gom引擎常见问题 M2出现服务器启动异常&#xff01;&#xff01;&#xff01;An error occurred while attempting to initialize the Borland Database Engine 解决方法&#xff1a;解决方法:打开C盘删除PDOXUSRS.NET文件,重启电脑即可,如果无效请用下面这个方法 开…

数组:矩阵快速转置 矩阵相加 三元组顺序表/三元矩阵 随机生成稀疏矩阵 压缩矩阵【C语言,数据结构】(内含源代码)

目录 题目&#xff1a; 题目分析&#xff1a; 概要设计&#xff1a; 二维矩阵数据结构&#xff1a; 三元数组\三元顺序表顺序表结构&#xff1a; 详细设计&#xff1a; 三元矩阵相加&#xff1a; 三元矩阵快速转置&#xff1a; 调试分析&#xff1a; 用户手册&#xff…

“互联网寒冬”来袭,软件测试人员该如何度过这次危机?

互联网寒冬对测试人的影响 去年还在全网声讨互联网企业996呢&#xff0c;今年突然没声音了&#xff0c;也不用讨论在哪个路灯上吊死互联网资本家了&#xff0c;因为都被裁了。 继教育培训领域大幅度裁员之后&#xff0c;大厂裁员消息也开始陆续传出&#xff0c;百度AIG,MEG多…

Linux进阶-用户管理与文件权限

目录 用户和用户组 三个核心文件 /etc/passwd /etc/group /etc/shadow 文件权限 用户和用户组 用户&#xff1a;Linux系统的使用者。包括了管理员、系统用户和普通用户。 用户组&#xff1a;由一个用户或多个用户组成。用户与用户组关系可以为一对一、一对多、多对一、多…

从零开始搭建一个微服务项目(一)

文章目录Nacos搭建一. 安装nacos二.创建项目导入依赖三. 进行配置四.引入Feign远程调用五.引入RIbbon负载均衡六.Nacos配置中心Nacos搭建 一. 安装nacos 我安装的是window版&#xff0c;可参照该教程nacos安装教程 二.创建项目导入依赖 首先我们先创建一个主工程。 引入如下…

透明窗体和控件

调用函数设置窗体透明度&#xff1a; setWindowOpacity(x); x(0-1)可以为小数 0.1 0.2 0.3等 x0 时完全透明k1时不透明setWindowOpacity(0.5); 当有控件时&#xff0c;控件也变透明&#xff0c;在ui界面中添加两个按钮 使窗体透明但控件不透明 setWindowFlag&#xff08;Qt:…

【MQ工作队列模式】

1、模式介绍 ⚫Work Queues&#xff1a;与入门程序的简单模式相比&#xff0c;多了一个或一些消费端&#xff0c; 多个消费端共同消费同一个队列中的消息。 ⚫ 应用场景&#xff1a;对于任务过重或任务较多情况使用工作队列可以提高任务处 理的速度。 小结: 1、在一个队列中如果…

初学Nodejs(3):http模块

初学Nodejs http模块 1、概念 什么是客户端与服务端 在网络节点中&#xff0c;负责消费资源的电脑&#xff0c;叫做客户端&#xff1b;负责对外提供网络资源的电脑叫做服务器 http模块是Nodejs官方提供的、用来创建web服务器的模块。通过http模块提供的http.createServe()方…

[附源码]java毕业设计流浪动物救助系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

活动sql语句索引基本优化

前言 最近接到了一个需求开发&#xff0c;然后开发完成以后打算对sql进行一些优化&#xff0c;于是等所有功能开发完成以后对mapper文件里面的sql,和service层的查询语句都摘出来&#xff0c;然后设计了一些索引&#xff0c;下面就来说说一些大概的优化思路&#xff0c;至于mys…

WPF上位机通信组件与Modbus协议

1、Modbus通信方式与分类 - 串口 RS485&#xff08;一主多从&#xff09;&#xff1a;不同的报文格式&#xff1a;ModbusAscii&#xff08;ASCII字符方式进行发送&#xff09;、ModbusRTU&#xff08;Remote Terminal Unit&#xff09; - 以太网&#xff08;TCP点对点&#…

[博士后申请]套磁信的五大误区

博士后申请有一些技巧需要注意&#xff0c;下面就随知识人网一起来看看博士后申请套磁信的五大误区。 误区一&#xff1a;字数越多越好 Email字数控制在200字左右。教授每天处理上百封邮件&#xff0c;简单明了的邮件内容是为别人节约时间的一种礼貌;简短易回复的信件也会加大…

supervisor常见报错问题处理及使用教程

Supervisor 是用Python开发的一套通用的进程管理程序&#xff0c;能将一个普通的命令行进程变为后台daemon&#xff0c;并监控进程状态&#xff0c;异常退出时能自动重启。 官网介绍 Supervisor已经过测试&#xff0c;可以在Linux&#xff08;Ubuntu 9.10&#xff09;&#xf…

MySql常见复合查询(重点)

复合查询&#xff08;重点&#xff09; 多表查询 实际开发中往往数据来自不同的表&#xff0c;所以需要多表查询。本节我们用一个简单的公司管理系统&#xff0c;有三张表 EMP,DEPT,SALGRADE来演示如何进行多表查询。 显示雇员名、雇员工资以及所在部门的名字因为上面的数据来…

如何解决Web前端安全问题?

我国网络技术水平的提升&#xff0c;带动着WEB前端业务量的显著增长&#xff0c;人们对于网络服务的需求也日益复杂&#xff0c;与此同时&#xff0c;越来越多的黑客出现&#xff0c;其攻击水平也有了明显提升&#xff0c;WEB前端也成为了众多黑客进行网络攻击的主要目标。 因…

什么是零代码?零代码与低代码有什么联系与区别?

传统的软件研发方式目前并不能很好地满足企业的需求&#xff1a;人员成本高、研发时间长、运维复杂。 这时零代码或低代码工具出现在市面上并被关注就是必然趋势了。对于不太了解两者的人来说&#xff0c;零代码和低代码是什么&#xff1f;又有什么联系与区别&#xff1f; 01 …

uni小程序——评论、文本域、发送、键盘调起、有值后按钮变色等

一、简介 文本域默认显示一行&#xff0c;最多显示4行&#xff0c;到了4行之后不再增高。 输入值后按钮变色 二、案例演示 三、代码 <template><view><view class"plBox"><textarea auto-height"true" maxlength"-1" :s…

[Linux安装软件详解系列]04 安装Redis

目录1、查看服务器是否已安装Redis2、安装Redis1&#xff09;下载2&#xff09;解压3&#xff09;安装4&#xff09;移动配置文件到安装目录下5&#xff09;配置redis为后台启动6&#xff09;将redis-cli&#xff0c;redis-server拷贝到bin下7&#xff09;启动redis8&#xff0…