react.js - react-native/nativebase密码类型的输入框在ios输入卡顿？

Question

nativebase input输入框type设置为password时，在ios输入卡顿，android没有问题。
（react-native的textinput secureTextEntry属性设置为true时同样的问题）
步骤1：聚焦输入框，输入“123”，失去焦点
步骤2:再聚焦到输入框，再输入4，会把“123”顶掉只剩4，或者顶掉“3”剩“124”

const [pwd, setPwd] = useState({    oldPwd: '',    newPwd: '',    newPwd2: '',    showOldPwd: false,    showNewPwd: false,  }); <TextInput    value={pwd.oldPwd}    secureTextEntry={true}    onChangeText={text => {      setPwd({...pwd, oldPwd: text}), console.log(pwd);    }}  />  <Input    placeholder={t('旧密码')}    value={pwd.oldPwd}    type={pwd.showPwd ? 'text' : 'password'}    onChangeText={text => {      setPwd({...pwd, oldPwd: text}), console.log(pwd);    }}  />

Answer 1

这个问题可能是由于 React Native 或 NativeBase 的输入法处理机制与 iOS 的原生输入法处理机制之间的冲突导致的。

一个可能的解决方案是使用第三方库，如 react-native-keyboard-aware-text-input。这个库可以帮助你更好地控制输入法，可能可以解决你的问题。

另一种可能的解决方案是自定义一个 TextInput 组件，并使用 onChangeText 回调来更新密码值。这样，你可以更好地控制输入框的值，避免出现卡顿问题。

如果你正在使用 React Native 0.60 或更高版本，你可以尝试使用 useEffect 钩子来更新密码值。例如：

import React, { useState, useEffect } from 'react';import { TextInput } from 'react-native';const PasswordInput = ({ secureTextEntry }) => {  const [value, setValue] = useState('');  useEffect(() => {    const interval = setInterval(() => {      if (value.includes('*')) {        setValue(value.replace(/[*]/g, ''));      } else {        setValue(value + '*');      }    }, 1000);    return () => clearInterval(interval);  }, [value]);  return (    <TextInput      value={value}      secureTextEntry={secureTextEntry}      onChangeText={text => setValue(text)}    />  );};

这个组件会在输入框中每秒钟插入一个星号，从而模拟密码输入的视觉效果。你可以在 NativeBase 的 Input 组件中使用这个组件，例如：

<Input placeholder="旧密码" secureTextEntry={true} />