如何避免React Native受控TextInput出现输入字符闪跳问题？

问题原因 #

Android原生TextInput的输入处理流程与React状态更新存在时序差：原生会先临时渲染输入的字符，之后才会被React的受控状态同步覆盖，导致视觉上的闪跳。而Web/Expo环境因处理机制不同，不会出现此问题。

解决方案 #

1. 完全接管输入逻辑，阻止原生默认行为 #

通过onKeyPress事件拦截按键输入，阻止原生自动更新文本，手动处理输入逻辑并同步更新受控状态，从根源上避免闪跳。

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

const ControlledAmountInput = () => {
  const [value, setValue] = useState('0.00');
  const cursorRef = useRef(1); // 用ref管理光标，避免重复创建对象
  const inputRef = useRef(null);

  const handleKeyPress = (e) => {
    e.preventDefault(); // 阻止原生输入行为
    const pressedKey = e.nativeEvent.key;

    // 自定义金额输入逻辑（替换为你的现有逻辑）
    if (/^\d$/.test(pressedKey) || pressedKey === '.') {
      let newValue = value;
      // 处理初始值替换
      if (newValue === '0.00') {
        newValue = pressedKey === '.' ? '0.' : pressedKey;
      } else {
        // 限制小数点后两位
        if (pressedKey === '.' && newValue.includes('.')) return;
        if (newValue.includes('.') && newValue.split('.')[1].length >= 2) return;
        newValue += pressedKey;
      }
      // 补全两位小数格式
      if (!newValue.includes('.')) newValue += '.00';
      else if (newValue.split('.')[1].length === 1) newValue += '0';

      setValue(newValue);
      // 更新光标位置（根据你的逻辑调整）
      cursorRef.current = newValue.length;
    }
  };

  return (
    <TextInput
      ref={inputRef}
      autoFocus
      onKeyPress={handleKeyPress}
      selection={{ start: cursorRef.current, end: cursorRef.current }}
      value={value}
      keyboardType="numeric"
    />
  );
};

2. 优化光标状态管理 #

避免每次渲染都创建新的selection对象，使用useRef存储光标位置，减少不必要的组件重绘，进一步缓解闪跳问题。

3. 验证自定义逻辑的同步性 #

确保你的金额处理逻辑是同步执行的，避免异步更新状态导致的时序差。如果涉及异步操作，需在操作完成后再更新状态。

关键说明 #

• 直接通过onKeyPress拦截并处理输入，跳过原生TextInput的自动文本更新流程，彻底消除闪跳的根源。
• 此方案同时兼容Android真机、模拟器及Expo环境，解决跨平台行为不一致的问题。

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