React Native Android端带minHeight/maxHeight的多行TextInput高度异常问题

该问题是Android端原生EditText组件多行模式下，空行和包含文本时的默认行高测量逻辑不一致，和React Native的minHeight/maxHeight约束冲突导致的，iOS端无该原生逻辑所以表现正常，可通过以下方案解决：

方案1：添加Android专属文本布局属性（最简便） #

给TextInput添加includeFontPadding={false}属性，搭配textAlignVertical: 'top'样式，关闭Android默认的字体上下边距，统一空行和有文本时的行高计算逻辑：

<TextInput
  multiline
  maxHeight={100}
  minHeight={40} // 替换为你实际设置的最小高度值
  includeFontPadding={false}
  style={{
    textAlignVertical: 'top',
    // 保留你原有的其他样式
  }}
/>

如果还存在微小高度差，可以额外设置和文本字号匹配的lineHeight属性，比如使用16号字体就设置lineHeight: 20，保证空行和有内容时的行高完全一致。

方案2：手动控制TextInput高度（完全可控，无原生兼容问题） #

通过onContentSizeChange事件监听内容实际高度，手动绑定到TextInput的样式高度，同时做最小/最大值限制，绕开原生的minHeight/maxHeight适配逻辑，是聊天输入框场景的通用实现方案：

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

const ChatInput = () => {
  const MIN_HEIGHT = 40; // 替换为你需要的最小高度
  const MAX_HEIGHT = 100; // 替换为你需要的最大高度
  const [inputHeight, setInputHeight] = useState(MIN_HEIGHT);

  return (
    <TextInput
      multiline
      onContentSizeChange={(e) => {
        const contentHeight = e.nativeEvent.contentSize.height;
        // 限制高度在最小和最大值区间内
        const newHeight = Math.min(Math.max(MIN_HEIGHT, contentHeight), MAX_HEIGHT);
        setInputHeight(newHeight);
      }}
      style={{
        height: inputHeight,
        // 保留你原有的其他样式
      }}
    />
  )
}

如果设置了上下内边距，需要把内边距的高度计算到MIN_HEIGHT的取值中。

方案3：旧版本RN兼容方案 #

如果使用的是0.66之前的旧版本React Native，可以把minHeight和maxHeight设置在TextInput的父View上，同时给TextInput设置flex: 1适配父容器高度：

<View style={{ minHeight: 40, maxHeight: 100 }}>
  <TextInput
    multiline
    style={{ flex: 1 }}
    // 保留你原有的其他属性和样式
  />
</View>

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