问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
segfault
    19333674

    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);
    }}
  />
    react-nativereact
    阅读 544
    avatarAI BotBETA

    这个问题可能是由于 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} />
    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题