能否在Redux Form中使用autoGrow？附渲染代码求助

当然可以在Redux Form中实现TextInput的自动增长功能，完全不需要切换到其他替代方案！我会结合你提供的渲染代码，一步步告诉你怎么修改实现这个需求。

实现思路 #

自动增长的核心是根据输入内容的行数动态调整TextInput的高度，我们可以通过React状态来维护高度，同时保留Redux Form的表单状态同步逻辑，两者完全兼容。

修改后的完整代码 #

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

const renderField = ({ 
  label, 
  keyboardType, 
  name, 
  meta: { touched, error }, 
  input: { onChange, ...restInput } 
}) => {
  // 初始化输入框高度，和你原来的默认高度保持一致
  const [inputHeight, setInputHeight] = useState(37);

  // 处理文本变化：先同步Redux Form状态，再处理高度逻辑
  const handleTextChange = (text) => {
    onChange(text);
  };

  // 监听输入内容尺寸变化，动态更新输入框高度
  const handleContentSizeChange = (event) => {
    // 获取内容实际高度，加10是为了保留内边距避免文字被截断
    const newHeight = event.nativeEvent.contentSize.height + 10;
    // 确保高度不低于初始值，避免输入框缩得太小
    setInputHeight(Math.max(newHeight, 37));
  };

  return (
    <View style={{ flexDirection: 'column', height: inputHeight + 33, alignItems: 'flex-start' }}>
      <View style={{ flexDirection: 'row', borderColor: 'black', borderBottomWidth: 1 }}>
        <TextInput
          style={{ 
            height: inputHeight, 
            width: 280, 
            paddingLeft: 10, 
            fontSize: 20 
          }}
          keyboardType={keyboardType}
          onChangeText={handleTextChange}
          onContentSizeChange={handleContentSizeChange}
          // 必须开启多行模式才能支持高度自动调整
          multiline={true}
          {...restInput}
          placeholder={label}
        />
      </View>
      {touched && error && (
        <Text style={{ color: 'red' }}>{error}</Text>
      )}
    </View>
  );
};

关键修改点说明 #

• 用状态维护高度：通过useState初始化输入框高度为你原来的37，保证初始样式和之前一致。
• 同步Redux Form状态：自定义handleTextChange函数，先调用Redux Form提供的onChange，确保表单值能正常同步到Redux store，不影响原有表单逻辑。
• 监听内容尺寸变化：利用onContentSizeChange事件获取输入内容的实际高度，动态更新输入框高度，同时设置最小高度避免输入框异常收缩。
• 开启多行模式：必须设置multiline={true}，否则TextInput无法支持多行输入，自动增长逻辑也无法生效。
• 调整外层容器高度：把外层View的固定高度70改成inputHeight + 33（33是底部提示文字区域的预留高度），避免输入框增高后被容器截断。

额外优化建议 #

• 如果想让高度变化更平滑，可以用React Native的Animated组件给高度添加过渡动画，避免突兀的尺寸变化。
• 可以根据你设置的字体大小和行高，计算更精准的高度值，进一步优化文字显示的舒适度。

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