React Native安卓端TextInput编程赋值后文本居中且两端截断异常

问题原因 #

安卓端的TextInput在通过useState编程式设置长文本时，会触发原生控件的异常逻辑：文本会变成居中对齐且两端被截断，而键盘输入时正常显示末尾截断，iOS端完全没这个问题，初始加载也正常。

解决办法 #

1. 强制设置左对齐样式 #

直接给TextInput加textAlign: 'left'样式，把安卓原生可能自动切换的对齐方式硬掰回来：

<TextInput
    ref={ref}
    editable={!props.disabled}
    placeholder={isFocus || props.value ? undefined : props.title}
    placeholderTextColor={colors.neutral[600]}
    maxLength={props.maxLength || 60}
    onFocus={setFocusOn}
    onBlur={setFocusOff}
    multiline={false}
    value={checkedItems.length > 0 ? boxInfo : null}
    style={{ textAlign: 'left' }} // 强制左对齐，避免居中
/>

2. 别用null当空值，换成空字符串 #

当checkedItems为空时赋值null，可能让安卓TextInput内部状态乱掉，改成空字符串试试：

value={checkedItems.length > 0 ? boxInfo : ''}

3. 用ref手动同步文本（顽固情况用） #

如果上面的方法不管用，就通过ref直接给原生控件设文本，绕开RN的状态同步可能的bug：

import { useRef, useEffect } from 'react';

// 组件里加这段
const inputRef = useRef(null);
useEffect(() => {
  if (checkedItems.length > 0) {
    inputRef.current?.setNativeProps({ text: boxInfo });
  }
}, [checkedItems, boxInfo]);

// TextInput组件
<TextInput
    ref={inputRef}
    // 其他属性不变
    value={checkedItems.length > 0 ? boxInfo : ''}
/>

4. 加上textAlignVertical约束 #

有些安卓设备或RN版本里，textAlignVertical会影响布局，也一起设置上：

style={{ textAlign: 'left', textAlignVertical: 'top' }}

为啥会这样？ #

安卓原生TextInput在处理编程式赋值的长文本时，可能错误触发了“居中+两端截断”的自动调整逻辑，而键盘输入时的文本插入流程不会触发这个分支。通过显式的样式约束和修正空值赋值方式，就能强制控件按预期左对齐、只截断末尾。

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