React Native中TextInput阿拉伯数字转英文数字去重问题求助

问题分析 #

原代码每次触发onChangeText时全量转换整个输入文本，在部分设备或输入法环境下，状态更新会导致TextInput重新渲染，输入法输入缓冲区与组件状态不同步，连续输入阿拉伯数字时会出现重复处理已转换字符的异常。

解决方案 #

1. 优化阿拉伯数字转英文数字的逻辑

替换原有的indexOf匹配方式，使用Unicode编码直接转换，更可靠且性能更好：

const a2e = (s) => s.replace(/[٠-٩]/g, (d) => 
  String.fromCharCode(d.charCodeAt(0) - 1632)
);

阿拉伯数字٠-٩的Unicode编码为U+0660至U+0669（十进制1632-1641），减去1632后正好对应英文数字0-9的编码（48-57）。

2. 仅转换新增字符，避免全量重复处理

通过对比当前输入文本与之前的状态，只转换用户新输入的部分，减少不必要的转换操作，同时避免状态更新导致的输入同步问题：

const Test = () => {
  const [state, setState] = useState('');
  const inputRef = useRef(null); // 定义inputRef用于控制光标

  const a2e = (s) => s.replace(/[٠-٩]/g, (d) => 
    String.fromCharCode(d.charCodeAt(0) - 1632)
  );

  const handleChangeText = (changedText) => {
    let newText;
    if (changedText.length > state.length) {
      // 处理新增字符：仅转换用户刚输入的部分
      const addedStr = changedText.slice(state.length);
      const convertedAdded = a2e(addedStr);
      newText = state + convertedAdded;
      
      // 恢复光标位置，避免状态更新后光标跳至末尾
      requestAnimationFrame(() => {
        if (inputRef.current) {
          inputRef.current.setSelectionRange(newText.length, newText.length);
        }
      });
    } else {
      // 处理删除或修改操作：全量转换文本
      newText = a2e(changedText);
    }
    setState(newText);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <TextInput 
        style={{ borderWidth: 1, color: "black", padding: 10, width: 300 }}
        ref={inputRef}
        placeholder='Please enter Email'
        value={state}
        keyboardType="email-address"
        onChangeText={handleChangeText}
      />
    </View>
  );
};

3. 手动维护光标位置

使用requestAnimationFrame在状态更新后设置光标位置，确保光标始终跟随用户输入的位置，避免因状态重置导致光标跳转到末尾，影响输入体验。

内容的提问来源于stack exchange，提问作者Muhammad Iqbal Muhammad Makki