react native 键盘事件

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

我门线引入需要的组件

import {

  StyleSheet,

  View,

  TextInput,

  Keyboard,

  TouchableWithoutFeedback,

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

 

    <TouchableWithoutFeedbackonPress={() => {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><TextInputmaxLength={12}ref={textInputOld}onSubmitEditing={Keyboard.dismiss}style={styles.input}// 是否显示密码secureTextEntry={isPassword}// 键盘绑定的值value={oldPwd}onChangeText={t => {setOldPwd(t);}}placeholder="请输入密码"></TextInput></ListItem></View><Buttontitle="提交"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();

    }

  };

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s笔记27--快速了解 k8s pod和cgroup的关系

k8s笔记27--快速了解 k8s pod和 cgroup 的关系 介绍pod & cgroup注意事项说明 介绍 随着云计算、云原生技术的成熟和广泛应用&#xff0c;K8S已经成为容器编排的事实标准&#xff0c;学习了解容器、K8S技术对于新时代的IT从业者显得极其重要了。 之前在文章 docker笔记13–…

【Web APIs】事件高级

目录 1.事件对象 1.1获取事件对象 1.2事件对象常用属性 2.事件流 1.1事件流的两个阶段&#xff1a;冒泡和捕获 1.2阻止事件流动 1.3阻止默认行为 1.4两种注册事件的区别 3.事件委托 1.事件对象 1.1获取事件对象 事件对象&#xff1a;也是一个对象&#xff0c;这个对象里…

ARM:按键中断

key_inc.c #include"key_inc.h"void key1_it_config(){//使能GPIOF外设时钟RCC->MP_AHB4ENSETR | (0x1<<5);//将PF9设置为输入模式GPIOF->MODER & (~(0x3<<18));//设置由PF9管脚产生EXTI9事件EXTI->EXTICR3 & (~(0XFF<<8));EXTI…

简单使用Swagger

文章目录 1、介绍2、 使用步骤3、 常用注解 1、介绍 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(https://swagger.io/)。 它的主要作用是&#xff1a; 使得前后端分离开发更加方便&#xff0c;有利于团队协作 接口的文…

IS-IS路由

概览&#xff1a; Intermediate System-to-Intermediate System&#xff0c;中间系统到中间系统协议 IS-IS--IGP--链路状态协议--AD值&#xff1a;115 IS--中间系统&#xff08;路由器&#xff09; ES--终端系统&#xff08;PC&#xff09; 在早期IS-IS的开发并不是为了IP…

机器学习——贝叶斯分类器(基础理论+编程)

目录 一、理论 1、初步引入 2、做简化 3、拉普拉斯修正 二、实战 1、计算P(c) 2、计算P(x|c) 3、实战结果 1、数据集展示 2、相关信息打印 一、理论 1、初步引入 在所有相关概率都已知的理想情形下&#xff0c;贝叶斯决策论考虑如何基于这些概率和误判损失来选择最…

[leetcode] 240. 搜索二维矩阵 II

编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[10,13,14,17,…

我的风采——android studio

目录 实现“我的风采”页面要求理论代码生成apk文件 实现“我的风采”页面 要求 要求利用’java框架的边框布局实现“找的风采 ”页而&#xff0c;其中中间为你的生活照&#xff0c;左右和下面为按钮&#xff0c;上面为标签 理论 Java GUI编程是Java程序设计的重要组成部分…

树状数组原理和代码

树状数组 求下标的对应 求i管着的下标的范围 方法&#xff1a;拆掉最右侧的1然后1 到你自己 query sum 1-i的和 拆掉最右侧的1 再把下一个数值吸收到sum 重复这个过程直到全变0为止 add 方法&#xff1a;加上最右侧的1 到上限为止 lowbit方法 单点增加范围查询模板 #inc…

surface go 2简单的配置

1.基本的配置信息 cpu 4425Y 感觉还是比较的弱 但是处理基本的网页浏览或收发电子邮件还是很不错的 2. C:\Users\win>systeminfo 主机名: DESKTOP-F5TT6HJ OS 名称: Microsoft Windows 10 专业版 OS 版本: 10.0.19045 暂缺 Build 19045 …

ubuntu上一款好用的串口工具screen

看名字&#xff0c;你猜他是什么&#xff1f; 安装 sudo apt install screen 然后将USB串口接到虚拟机&#xff0c;执行dmesg命令查看串口设备名&#xff1a; 测试&#xff1a; sudo screen /dev/ttyUSB0 115200确实很简单。

uniapp-Form示例(uviewPlus)

示例说明 Vue版本&#xff1a;vue3 组件&#xff1a;uviewPlus&#xff08;Form 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架&#xff09; 说明&#xff1a;表单组建、表单验证、提交验证等&#xff1b; 截图&#xff1a; 示例代码 <templat…