React Native iOS端使用State更新TextInput值时文本偏移问题咨询

嘿，我之前也遇到过一模一样的iOS平台TextInput异常问题！当在光标中间输入字符时，新字符加上后文本莫名偏移，这确实是React Native在iOS上的一个常见小bug，主要是原生文本组件和React状态更新时的光标位置计算不同步导致的。给你几个亲测有效的解决方案：

方案1：手动维护光标位置 #

通过监听光标选中事件，记录当前光标位置，在更新文本后手动恢复光标位置，强制让TextInput正确渲染光标：

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

export default function App() {
  const [inputText, setInputText] = useState("some test string that i");
  const [cursorPosition, setCursorPosition] = useState({ start: 0, end: 0 });

  const handleTextChange = (text) => {
    setInputText(text);
    // 输入新字符后，光标位置应该向后移动一位
    setCursorPosition(prev => ({
      start: prev.start + 1,
      end: prev.end + 1
    }));
  };

  const handleSelectionChange = (event) => {
    // 实时记录光标选中的位置
    setCursorPosition(event.nativeEvent.selection);
  };

  return (
    <TextInput
      placeholder="Type something in"
      style={styles.input}
      onChangeText={handleTextChange}
      value={inputText}
      numberOfLines={1}
      onSelectionChange={handleSelectionChange}
      selection={cursorPosition}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    fontSize: 16,
    margin: 20,
  },
});

方案2：替换numberOfLines={1}为multiline={false} #

虽然numberOfLines={1}是设置单行，但iOS原生对multiline={false}（默认值）的单行输入处理更稳定，试试去掉numberOfLines属性，或者显式设置multiline={false}：

<TextInput
  placeholder="Type something in"
  style={styles.input}
  onChangeText={(text) => setInputText(text)}
  value={inputText}
  multiline={false} // 显式声明单行，避免iOS的渲染异常
/>

方案3：检查并调整输入框样式 #

有时候不合理的lineHeight、padding或fontSize会干扰iOS的文本光标计算。确保你的输入框样式是适配iOS的，比如：

const styles = StyleSheet.create({
  input: {
    fontSize: 16,
    lineHeight: 22, // 行高和字号匹配，避免文本垂直偏移
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
  },
});

方案4：升级React Native版本 #

这个光标偏移bug在React Native 0.60-0.69的部分版本中比较普遍，如果你使用的是较旧的版本，升级到0.70+的稳定版本，官方已经修复了不少iOS文本输入的相关问题。

如果以上方案还不行，可以试试禁用iOS的自动修正功能：添加autoCorrect={false}和autoCapitalize="none"属性，有时候原生的自动修正会干扰光标定位逻辑。

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