React Native TextInput强制大写Android端出现重复字符问题求助

问题分析 #

Android端输入"Bug"时显示"BUBUG"，核心原因是onChangeText的处理逻辑与Android TextInput的输入同步机制冲突：输入新字符时，Android会先将字符追加到当前输入框内容，而onChangeText中直接转大写后执行setText，会导致组件重新渲染时旧的大写值与新输入字符的大写值重复拼接。iOS端无此问题是因为两端TextInput的输入同步逻辑存在差异。

解决方案 #

方案1：改用onChange事件获取原生输入文本 #

直接通过原生事件获取完整输入文本，转大写后设置，避免拼接冲突：

import { TextInput, NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';

// 替换原onChangeText为onChange处理函数
const handleInputChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
  const inputText = event.nativeEvent.text;
  const uppercaseText = inputText.toUpperCase();
  setText(uppercaseText);
};

// 修改TextInput组件属性
<TextInput
  {...register}
  autoFocus={autoFocus}
  value={text}
  onChange={handleInputChange} // 替换原onChangeText
  style={[
    InputTextStyle.input,
    textStyles,
    !!error ? {color: baseColors.principal} : null,
  ]}
  onBlur={onBlurInput}
  onFocus={() => {
    textValue.value = 1;
    setShowGradient(true);
  }}
  cursorColor={baseColors.principal}
  keyboardType={keyboardType}
  maxLength={max}
  editable={editable}
  textAlign={textAlign}
/>

方案2：结合autoCapitalize属性减少处理冲突 #

让键盘直接输入大写字符，再配合值的大写处理，降低同步冲突概率：

<TextInput
  {...register}
  autoFocus={autoFocus}
  value={text}
  onChangeText={(inputText) => setText(inputText.toUpperCase())}
  autoCapitalize="characters" // 强制键盘输入大写
  style={[
    InputTextStyle.input,
    textStyles,
    !!error ? {color: baseColors.principal} : null,
  ]}
  onBlur={onBlurInput}
  onFocus={() => {
    textValue.value = 1;
    setShowGradient(true);
  }}
  cursorColor={baseColors.principal}
  keyboardType={keyboardType}
  maxLength={max}
  editable={editable}
  textAlign={textAlign}
/>

注意事项 #

• 不要同时使用textTransform: 'uppercase'样式和代码转大写，双重处理会加重同步问题。
• 若使用表单库（如React Hook Form）的register，需确保register返回的属性不会和自定义输入处理逻辑冲突，必要时手动接管输入值的同步。

内容的提问来源于stack exchange，提问作者Hernâni Pereira