React Native中自定义组件实现多行输入框高度自适应方案

嘿，我来帮你搞定这个问题！要让外层View跟着TextInput的多行内容自动调整高度，只需要调整几个关键属性和样式设置就行，具体方案如下：

核心调整要点 #

• 给TextInput开启多行模式：显式设置multiline={true}（如果你的props没传递这个，组件里兜底设置会更稳妥）
• 不给TextInput设固定高度，改用minHeight定义初始高度，让它能随内容自动扩展
• 外层View不要设置固定高度，让它自然包裹TextInput的实际高度

修改后的完整组件代码 #

import React from "react";
import { View, TextInput, StyleSheet } from "react-native";
import { InputIcon } from "../";

const CommentInput = props => (
  <View style={styles.inputContainer}>
    <TextInput 
      {...props} 
      underlineColorAndroid="transparent" 
      multiline={true}
      style={[ 
        styles.input, 
        { 
          fontSize: props.fontSize || 14,
          minHeight: props.minHeight || 40
        } 
      ]}
    />
    <InputIcon />
  </View>
);

const styles = StyleSheet.create({
  inputContainer: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderWidth: 1,
    borderColor: "#e0e0e0",
    borderRadius: 8,
    flexDirection: "row",
    alignItems: "flex-start", // 让Icon和TextInput顶部对齐，避免多行时Icon居中
    gap: 8,
    // 不要设置固定height，让容器自适应子元素高度
  },
  input: {
    flex: 1, // 占满容器剩余空间
    paddingVertical: 6,
    paddingHorizontal: 0,
    textAlignVertical: "top", // 让输入内容从顶部开始，符合多行输入习惯
    // 移除固定height设置，改用minHeight保证初始高度
  },
});

export default CommentInput;

额外优化说明 #

如果需要更精细化控制输入框高度，还可以监听内容尺寸变化：

// 组件内添加状态管理高度
const [inputHeight, setInputHeight] = useState(props.minHeight || 40);

// 在TextInput中添加监听回调
onContentSizeChange={(event) => {
  setInputHeight(event.nativeEvent.contentSize.height);
}}

不过通常情况下，前面的基础设置已经能满足自适应需求，这个是进阶的精细化控制选项。

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