React Native自定义键盘下如何获取TextInput的光标位置？

1. 用setNativeProps主动控制选区（推荐） #

当自定义键盘修改输入框内容时，别只更新value，要同时通过setNativeProps手动设置光标位置——这是最可靠的方式，还能结合掩码逻辑精准控制：

// 自定义键盘添加字符的示例逻辑
const handleInputChar = (char) => {
  // 先根据掩码规则处理新输入的文本
  const newText = applyMask(inputValue + char);
  // 计算光标应该在的位置（跳过掩码占位符，比如空格、横杠等）
  const newCursorPos = getCorrectCursorPos(newText, currentCursorPos);

  setInputValue(newText);
  // 直接给TextInput设置选区（光标位置）
  textInputRef.current?.setNativeProps({
    selection: { start: newCursorPos, end: newCursorPos }
  });
};

这里的applyMask和getCorrectCursorPos要根据你的掩码规则实现，比如手机号掩码里，输入字符后要跳过中间的占位符，让光标始终落在可输入的有效位置上。

2. 借助第三方掩码输入组件 #

如果不想自己写光标计算逻辑，直接用成熟的第三方组件，比如react-native-masked-text——这类组件已经内置了自定义键盘下的光标维护逻辑，开箱即用：

import { TextInputMask } from 'react-native-masked-text';

<TextInputMask
  type="cel-phone"
  options={{ withDDD: true, dddMask: '(99) ' }}
  value={inputValue}
  onChangeText={(text) => setInputValue(text)}
  onSelectionChange={(e) => setCurrentCursorPos(e.nativeEvent.selection.start)}
/>

3. 应急方案：定时读取选区（不推荐） #

如果以上方法都用不了，可以用定时器定时获取输入框的选区信息，但这种方法性能较差，仅适合临时救急：

useEffect(() => {
  const checkCursorInterval = setInterval(() => {
    textInputRef.current?.getSelection((selection) => {
      // 拿到光标位置后更新状态
      setCurrentCursorPos(selection.start);
    });
  }, 150);

  return () => clearInterval(checkCursorInterval);
}, []);

核心逻辑说明 #

onSelectionChange本来就只响应用户手动调整选区的操作，代码修改value不会触发这个事件。所以解决的核心就是主动维护光标状态：每次自定义键盘修改内容时，先算好正确的光标位置，再手动同步到TextInput上。

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