如何在React Native中获取TextInput光标的x-y坐标？

我需要获取TextInput光标的x-y坐标，以便将另一个组件锚定在光标上方，目标效果如下：

Web端实现方案 #

• 利用Selection API获取光标实时位置：

  1. 获取目标输入框DOM元素：const input = document.getElementById('your-input-id');
  2. 获取当前选区对象：const selection = window.getSelection();
  3. 若光标在输入框内，提取光标对应的范围：const range = selection.getRangeAt(0);
  4. 获取光标在视口中的坐标信息：const rect = range.getBoundingClientRect();
  5. 通过rect.top和rect.left定位锚定组件，比如将菜单放在光标正上方。

  示例代码：

  const input = document.getElementById('text-input');
  const menu = document.getElementById('anchor-menu');
  
  // 监听光标位置变化事件
  ['input', 'click', 'keydown'].forEach(event => {
    input.addEventListener(event, () => {
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        menu.style.position = 'fixed';
        menu.style.top = `${rect.top - menu.offsetHeight}px`;
        menu.style.left = `${rect.left}px`;
      }
    });
  });
  

React Native端实现方案 #

React Native的TextInput未直接暴露光标坐标API，可通过字符索引结合布局信息计算：

• 步骤：

  1. 用useRef获取TextInput实例：const inputRef = useRef(null);
  2. 在onSelectionChange事件中获取光标对应的字符索引：const { start } = e.nativeEvent.selection;
  3. 调用measureInWindow获取输入框的屏幕位置，结合字符宽度计算光标x坐标，y坐标直接基于输入框顶部偏移。

  示例代码：

  import React, { useRef, useState } from 'react';
  import { TextInput, View, Text } from 'react-native';
  
  const CursorAnchorDemo = () => {
    const inputRef = useRef(null);
    const [menuPos, setMenuPos] = useState({ top: 0, left: 0 });
    const CHAR_WIDTH = 16; // 根据字体实际大小调整
  
    const handleSelectionChange = (e) => {
      const { start } = e.nativeEvent.selection;
      inputRef.current?.measureInWindow((x, y) => {
        const cursorX = x + start * CHAR_WIDTH;
        setMenuPos({ top: y - 45, left: cursorX });
      });
    };
  
    return (
      <View style={{ flex: 1, padding: 20 }}>
        <TextInput
          ref={inputRef}
          style={{ borderWidth: 1, padding: 10, fontSize: 16 }}
          onSelectionChange={handleSelectionChange}
          placeholder="输入文本测试"
        />
        <View
          style={{
            position: 'absolute',
            top: menuPos.top,
            left: menuPos.left,
            width: 120,
            height: 40,
            backgroundColor: '#fff',
            borderWidth: 1,
            borderRadius: 4,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text>锚定菜单</Text>
        </View>
      </View>
    );
  };
  
  export default CursorAnchorDemo;
  

• 优化提示：若需精准字符宽度，可使用react-native-text-size库计算文本实际宽度。

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