React Native中根据内容单独动态调整多个TextInput高度

问题核心原因是所有输入框共用同一个height状态，任意输入框更新高度时会同步作用到所有绑定该状态的组件，要实现独立自适应，只需要给每个输入框维护独立的高度值，配合组件自带的内容尺寸监听事件即可。

具体实现步骤 #

• 第一步：替换原有单值高度状态
  不再用单个数字存储高度，改用对象结构存储每个输入框对应的高度，key为每个问题项的唯一标识（优先用业务id，无id可用列表索引），初始值统一设为默认高度44：

// 假设你动态渲染的数据源为questions数组
const [inputHeights, setInputHeights] = useState(() => {
  const initialHeightMap = {}
  questions.forEach((item, index) => {
    const mapKey = item.id ?? index
    initialHeightMap[mapKey] = 44
  })
  return initialHeightMap
})

• 第二步：遍历渲染时绑定独立高度和更新逻辑
  渲染每个TextInput时，只读取当前项对应的高度值，同时监听onContentSizeChange事件，拿到当前输入框内容的实际高度后，只更新当前项对应的高度状态：

{questions.map((item, index) => {
  const currentKey = item.id ?? index
  return (
    <TextInput
      key={currentKey}
      multiline
      height={inputHeights[currentKey]}
      placeholderText={`Question ${index + 1}`}
      onContentSizeChange={(e) => {
        // 获取内容实际高度
        const contentHeight = e.nativeEvent.contentSize.height
        setInputHeights(prev => ({
          ...prev,
          // 用Math.max保证最小高度为44，避免内容清空时高度塌缩
          [currentKey]: Math.max(44, contentHeight)
        }))
      }}
    />
  )
})}

注意事项 #

• 如果问题列表支持增删、排序操作，不要用数组索引作为状态映射的key，必须用每个问题项的唯一业务id作为key，否则会出现高度状态错位的问题
• 可以根据UI需要给计算出的内容高度加固定缓冲值（比如contentHeight + 10），避免多行文字贴到输入框上下边缘
• 该方案兼容所有React Native版本，不需要引入额外第三方组件

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