react native 键盘事件

在做修改密码功能是发现他的键盘第一次调起之后然后收起键盘焦点不会消失而且键盘也不会再调起来了

我门线引入需要的组件

import {

  StyleSheet,

  View,

  TextInput,

  Keyboard,

  TouchableWithoutFeedback,

} from 'react-native';
import React, {useEffect, useState, useRef} from 'react';

 

    <TouchableWithoutFeedback
      onPress={() => {
        closeKeyboard();
      }}>
      <View style={[globalStyles.wrapPadding, styles.forget]}>
        <View style={[globalStyles.jdCardListWrap, styles.card]}>
          <ListItem bottomDivider containerStyle={[styles.list]}>
            <ListItem.Content>
              <ListItem.Title>旧密码</ListItem.Title>
            </ListItem.Content>
            <TextInput
              maxLength={12}
              ref={textInputOld}
              onSubmitEditing={Keyboard.dismiss}
              style={styles.input}
              // 是否显示密码
              secureTextEntry={isPassword}
              // 键盘绑定的值
              value={oldPwd}
              onChangeText={t => {
                setOldPwd(t);
              }}
              placeholder="请输入密码"></TextInput>
          </ListItem>
        </View>

        <Button
          title="提交"
          color="primary"
          size="lg"
          containerStyle={[styles.button]}
          onPress={() => {
            ruleFormData();
          }}
        />
      </View>
    </TouchableWithoutFeedback>

获取输入框

 const textInputOld = useRef(null);

  // 键盘是否关闭

  const [keyboardIsShow, setKeyboardIsShow] = useState<boolean>(false);

然后再 useEffect 中

// 这里取监听键盘事件
useEffect(() => {
    // 监听键盘收起事件
    const hideSubscription = Keyboard.addListener('keyboardDidHide', ():void => {
      setKeyboardIsShow(false);
      // 键盘关闭 让输入框失去焦点
      textInputOld.current.blur();
    });
    const showSubscription = Keyboard.addListener('keyboardDidShow', ():void => {
      setKeyboardIsShow(true);
    });
    return () => {
      // 销毁键盘事件
      hideSubscription.remove();
      showSubscription.remove();
    };
  }, []);

 点击空白地方取消键盘,我们再最外层加上该组件

 

  const closeKeyboard = ():void => {

    if (keyboardIsShow) {

        // 收起键盘

      Keyboard.dismiss();

    }

  };

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】Java中Map和Set详解(含二叉搜索树和哈希表)

目录 Map和Set详解 1.二叉搜索树 2.Map常见方法 3.Set常见方法 4.哈希表 Map和Set详解 Map&#xff1a;一种键值对结构&#xff0c;hashMap中键和值均可以为空&#xff0c;hashTable中则不可以存放null值 Set&#xff1a;一种集合&#xff0c;不能存放重复元素&#xff0c…

解决前端跨域问题

前端跨域问题 该问题是由于前端的服务路径或端口和后台的不一致所导致的 Springboot跨域设置 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; …

手撕算法-二叉树的层序遍历

描述 分析 层序遍历&#xff0c;需要用到队列。 代码 代码1&#xff1a;独立bfs函数 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(i…

(C语言)浮点数在内存中的存储详解

1. 浮点数 常见的浮点数&#xff1a;3.14159、 1E10等 &#xff0c;浮点数家族包括&#xff1a; float、double、long double 类型。 浮点数表示的范围&#xff1a; float.h 中定义. 2. 浮点数的存储 我们先来看一串代码&#xff1a; int main() {int n 9;float* pFloa…

BufferedInputStream解读

咦咦咦&#xff0c;各位小可爱&#xff0c;我是你们的好伙伴——bug菌&#xff0c;今天又来给大家普及Java之IO流啦&#xff0c;别躲起来啊&#xff0c;听我讲干货还不快点赞&#xff0c;赞多了我就有动力讲得更嗨啦&#xff01;所以呀&#xff0c;养成先点赞后阅读的好习惯&am…

实现文本溢出提示效果

实现效果 本文的需求是文本溢出时显示省略号&#xff0c;鼠标移入文本时提示完整的文字内容。 实现代码 <div class"container" onmouseover"handleMouseEnter(this)">鼠标移入显示全部内容</div><style> .container {width: 100px;o…

力扣每日一题 2024/3/23 统计桌面上的不同数字

题目描述 用例说明 思路讲解 给定整数n&#xff0c;找出循环十亿天后桌上的数字。可以先通过一天来找找规律。 第一天 n%i1 &#xff08;1<i<n&#xff09;只有n-1符合.加入桌面 第二天(n-1)%i1 &#xff08;1<i<n-1&#xff09;只有n-2符合 加入桌面 依次类推…

第十三届蓝桥杯JavaB组省赛真题 - 星期计算

解题思路&#xff1a; 方法一&#xff1a; 20的22次方是一个比较大的数&#xff0c;long和int都装不下这么大的数&#xff0c;因此需要使用下面的方法&#xff0c;如果 a, b, p 都是整数&#xff0c;且 p 是正数&#xff0c;那么&#xff1a;(a * b) % p (a % p * b % p) % …

【C语言】linux内核pci_set_drvdata函数

一、讲解 该函数pci_set_drvdata是Linux内核中用于PCI设备的一个辅助函数&#xff0c;其主要作用是设置给定PCI设备的驱动程序私有数据。这个函数的参数包括一个指向pci_dev结构体的指针pdev&#xff0c;该结构体描述了一个PCI设备&#xff0c;以及一个void *类型的指针data&a…

我父亲曾经告诉我:“等你到了35岁,你应该足够聪明地意识到...”。

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

iostream、fstream、sstream、string、vector、unordered_map、stack

iostream 用于输入输出操作&#xff0c;包含了处理标准输入输出流的功能&#xff08;例如&#xff0c;cin, cout, cerr等&#xff09;。 #include <iostream>int main() {int number;std::cout << "Enter a number: ";std::cin >> number;std::…

算法-最短路径

图的最短路径问题是一个经典的计算机科学和运筹学问题&#xff0c;旨在找到图中两个顶点之间的最短路径。这种问题在多种场景中都有应用&#xff0c;如网络路由、地图导航等。 解决图的最短路径问题有多种算法&#xff0c;其中最著名的包括&#xff1a; 1.迪杰斯特拉算法 (1).…

windows 系统下(nacos1.x) nacos-1.1.3 链接数据库 mysql8.0 出错分析

** windows 系统下&#xff08;nacos1.x&#xff09; nacos-1.1.3 链接数据库 mysql8.0 出错分析 ** 1、首先以下方法亲测无效&#xff1a; 1&#xff09;需要在数据库 URL 链接配置信息中 添加 allowPublicKeyRetrievaltrue 无效 db.url.0**&allowPublicKeyRetrievalt…

web前端之行为验证码、不同设备和屏幕尺寸呈现不同大小、元素宽度根据视口宽度进行调整、元素或图片裁剪、图片验证码

MENU 前言版本一(htmlJScss)版本二(htmlJScsscanvas) 前言 1、版本一的样式比较齐全&#xff1b; 2、版本二的JS逻辑和功能效果比较完善&#xff0c;且是别人的代码&#xff0c;后续会对样式进行完善。[Gitee | 哔哩哔哩]&#xff1b; 3、两个版本各有千秋&#xff0c;主要学习…

使用 ArcGIS Pro 和 Google Earth Engine 可视化地表温度

在这项研究中,利用 Landsat 热数据通过各种方法检查了 2013 年和 2023 年恰纳卡莱省的地表温度变化。使用了 NDVI、大气层顶部、亮度温度、植被比例和地表温度等公式。研究结果表明,从热图像中获得的数据,特别是地表温度(LST),是土地解释的重要资源。 研究区域:恰纳卡莱…

[Java、Android面试]_14_Retrofit的作用

本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天整理一点&#xff0c;后续会陆续分享出来&#xff0c;感兴趣的朋友可关注收…

2024 年广西职业院校技能大赛高职组《云计算应用》赛项赛题第 2 套

#需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; #需要资源或有问题的&#xff0c;可私博主&#xff01;&#xff01;&#xff01; 某企业根据自身业务需求&…

电脑数据守护神:自动备份数据的重要性与实用方案

一、数据安全的基石&#xff1a;自动备份数据的重要性 在数字化时代&#xff0c;电脑中的数据成为了我们生活和工作中不可或缺的一部分。无论是重要的工作文件、珍贵的个人照片&#xff0c;还是日常使用的应用程序&#xff0c;这些数据都承载着我们的记忆和劳动成果。然而&…

学习次模函数-第1章 引言

许多组合优化问题可以被转换为集合函数的最小化&#xff0c;集合函数是在给定基集合的子集的集合上定义的函数。同样地&#xff0c;它们可以被定义为超立方体的顶点上的函数&#xff0c;即&#xff0c;其中是基集合的基数-它们通常被称为伪布尔函数[27]。在这些集合函数中&…

taro框架之taro-ui中AtSwipeAction的使用

题记&#xff1a;所需效果&#xff1a;滑动删除 工作进程 官网文档代码 <AtSwipeAction options{[{text: 取消,style: {backgroundColor: #6190E8}},{text: 确认,style: {backgroundColor: #FF4949}} ]}><View classNamenormal>AtSwipeAction 一般使用场景</…