React Native中如何实现TextInput多行输入时自动增高？

嘿，这个需求其实挺常见的，我来给你一步步拆解怎么实现～

你的现有代码已经开了个好头（multiline={true}是必须的），要让输入框随内容自动增高，核心思路是监听输入内容的尺寸变化，动态调整输入框的高度。具体步骤如下：

1. 初始化状态，新增高度变量 #

首先在组件的state里加一个inputHeight，用来存储输入框的动态高度，初始值可以设为你想要的空输入时的最小高度（比如40，根据你的UI风格调整）：

constructor(props) {
  super(props);
  this.state = {
    comment: { value: '' },
    inputHeight: 40, // 初始最小高度
  };
}

2. 给TextInput绑定尺寸监听事件 #

给TextInput添加onContentSizeChange事件，这个事件会在输入内容的尺寸变化时触发（比如换行、输入更多文字），我们可以从中拿到内容的实际高度，然后更新state里的inputHeight。同时可以添加ref方便后续操作：

<TextInput
  placeholder="Type Comment"
  value={this.state.comment.value}
  onChangeText={value => this.onChangeComment(value)}
  onPress={() => this.uploadComment()}
  multiline={true}
  maxLength={200}
  ref={input => this.textInput = input}
  // 监听内容尺寸变化，动态更新高度
  onContentSizeChange={(e) => {
    // 如果需要限制最大高度（比如原来的5行），可以加个判断
    const maxAllowedHeight = 120; // 对应5行的高度，根据你的字体大小调整
    this.setState({
      inputHeight: Math.min(e.nativeEvent.contentSize.height, maxAllowedHeight)
    });
  }}
  // 动态绑定高度，同时设置最小高度
  style={{
    height: this.state.inputHeight,
    minHeight: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 8,
    fontSize: 16,
  }}
/>

关键细节说明 #

• onContentSizeChange的作用：它会返回e.nativeEvent.contentSize，里面包含了当前输入内容的实际高度，我们直接用这个值来设置输入框高度，就能完美匹配内容。
• 限制最大高度：如果你希望输入框最多增高到5行的高度（像你原来的numberOfLines={5}那样），就用Math.min()把高度限制在你计算好的最大高度内，超过后输入框不再增高，会自动出现垂直滚动条。
• minHeight的必要性：防止输入框在没有内容时变得太窄，保证基础的UI美观度。

额外小提示 #

如果你的TextInput用了自定义字体或者特殊的行高，记得调整初始高度和最大高度的数值，确保和你的文字排版匹配。比如行高设为20的话，5行的高度大概是20*5 + padding*2，你可以根据实际情况计算。

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