React Native中如何设置TextInput的secureTextEntry实现首字符短暂可见

你原本的逻辑secureTextEntry: state.password.length ? true : false会在密码长度不为0时立刻开启加密，首字符输入的同时state直接更新，secureTextEntry瞬间切为true，所以看不到首字符的显示过程，因此无法实现需求。

核心思路是新增定时器控制secureTextEntry的切换时机，让首字符输入后延迟一段时间再开启加密，同时处理定时器清理避免内存泄漏。

完整修改代码 #

import { useState, useRef, useEffect } from 'react';

// 组件内部代码
const [state, setState] = useState({
  email: '',
  password: '',
});
// 新增控制密码加密的状态
const [secureText, setSecureText] = useState(true);
// 存储定时器，用于清理延时任务
const timerRef = useRef(null);

// 组件卸载时清理定时器，防止内存泄漏
useEffect(() => {
  return () => timerRef.current && clearTimeout(timerRef.current);
}, []);

const handlePasswordChange = (val) => {
  // 先更新密码状态
  setState(old => ({...old, password: val}));

  // 清理上一次的定时器，避免重复触发逻辑异常
  if (timerRef.current) clearTimeout(timerRef.current);

  // 仅输入首字符时短暂关闭加密
  if (val.length === 1) {
    setSecureText(false);
    // 延时300ms后开启加密，时长可根据需求调整
    timerRef.current = setTimeout(() => {
      setSecureText(true);
    }, 300);
  } else {
    // 非首字符输入时保持加密状态
    setSecureText(true);
  }
};

// Input组件配置
<Input
  options={{
    placeholder: t('password'),
    secureTextEntry: secureText,
    value: state.password,
    ref: (ref) => {
      refs.password = ref;
    },
    onChangeText: handlePasswordChange,
    onSubmitEditing: submitHandler,
  }}
/>

• 如果需要实现每输入一个新字符都短暂可见的效果，只需要把判断条件val.length === 1修改为val.length > 0即可。
• 如果切换secureTextEntry时出现光标跳转到开头的问题，可以新增selection状态手动绑定光标位置到密码末尾：

  // 新增光标位置状态
  const [selection, setSelection] = useState({ start: 0, end: 0 });
  
  // 在handlePasswordChange方法末尾加入
  setSelection({ start: val.length, end: val.length });
  
  // Input的options中新增两个属性
  selection: selection,
  onSelectionChange: ({ nativeEvent: { selection } }) => setSelection(selection),
  

内容的提问来源于stack exchange，提问作者user16350114