React Native多行TextInput光标高度异常：自定义光标不同步

方法一：用padding替代lineHeight控制行间距（最简单方案） #

React Native的TextInput光标高度默认和fontSize绑定，设置lineHeight后光标会被拉长到行高。如果你的行间距需求可以通过上下padding实现，直接去掉lineHeight，用padding控制整体行间距：

customStyle={{
  color: '#8DA3BA',
  position: 'absolute',
  top: IS_IOS ? -15 : -4,
  left: 10,
  minHeight: 1000,
  // 用paddingVertical替代lineHeight实现行间距感
  paddingVertical: 15,
  textTransform: 'capitalize',
  fontFamily: 'Metropolis',
  fontSize: 14,
  minHeight: 40
}}

这样光标会自动匹配fontSize的高度，同时padding能保证文本有合适的上下间距。

方法二：修复自定义光标同步问题 #

如果必须保留lineHeight，可以通过精准计算光标位置来修复自定义光标的同步问题：

1. 新增自定义光标组件和状态：

import { View, TextInput, Keyboard } from 'react-native';
import { useState, useRef } from 'react';

// 组件内状态与引用
const [caretVisible, setCaretVisible] = useState(false);
const [caretPosition, setCaretPosition] = useState({ x: 0, y: 0, height: 14 });
const inputRef = useRef(null);

// 计算光标位置的函数
const calculateCaretPosition = async (selection) => {
  if (!inputRef.current || selection.start !== selection.end) return;
  
  try {
    const layout = await inputRef.current.measureInWindow();
    // 获取文本布局信息（React Native 0.60+支持）
    const textLayouts = await inputRef.current.getTextLayouts();
    const targetLine = textLayouts.find(line => 
      line.start <= selection.start && line.end >= selection.start
    );
    
    if (targetLine) {
      setCaretPosition({
        x: layout.x + targetLine.x + 10, // 对应TextInput的left padding
        y: layout.y + targetLine.y + (IS_IOS ? -15 : -4) + (targetLine.height - 14), // 偏移到字体高度位置
        height: 14 // 与fontSize保持一致
      });
    }
  } catch (err) {
    console.error('计算光标位置失败:', err);
  }
};

const handleSelectionChange = (e) => {
  calculateCaretPosition(e.nativeEvent.selection);
};

2. 在TextInput外层添加自定义光标：

<View style={{ position: 'relative' }}>
  <TextInput
    ref={inputRef}
    style={customStyle}
    multiline={true}
    textAlignVertical="top"
    value={text}
    maxLength={maxContentLength}
    onChangeText={(value) => handleTextChange(value)}
    onSelectionChange={handleSelectionChange}
    onFocus={() => {
      handleInputFocus();
      setCaretVisible(true);
    }}
    onBlur={() => {
      setCaretVisible(false);
      Keyboard.dismiss();
    }}
    returnKeyType="done"
    blurOnSubmit={true}
    caretHidden
  />
  {/* 自定义光标 */}
  {caretVisible && (
    <View
      style={{
        position: 'absolute',
        left: caretPosition.x,
        top: caretPosition.y,
        width: 1,
        height: caretPosition.height,
        backgroundColor: '#8DA3BA',
        pointerEvents: 'none' // 避免干扰输入交互
      }}
    />
  )}
</View>

注意：getTextLayouts API在部分Android设备上可能存在兼容性问题，需测试验证。

方法三：原生模块修改光标高度（彻底解决） #

如果前两种方法都不满足需求，可以通过原生代码直接修改光标样式：

iOS端 #

在自定义TextInput组件或AppDelegate.m中重写caretRectForPosition方法：

- (CGRect)caretRectForPosition:(UITextPosition *)position {
  CGRect rect = [super caretRectForPosition:position];
  rect.size.height = 14; // 设置为你的fontSize值
  return rect;
}

Android端 #

在res/drawable目录下创建cursor_drawable.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="1dp" android:height="14dp" /> <!-- height与fontSize保持一致 -->
    <solid android:color="#8DA3BA" />
</shape>

然后在自定义EditText或React Native配置中设置：

editText.setCursorDrawable(R.drawable.cursor_drawable);

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