React Native - 占位符的长度优先于多行输入的高度

Question

问题：

我的文本输入占位符最多可以容纳 2000 个字符。只要我的用户开始输入文本输入，占位符就会消失，但文本输入 高度不会自动缩小 。

据我所知，我的多行文本输入的高度是根据占位符文本的原始长度设置的。有没有办法解决这个问题？

我的代码：

import { Input } from 'react-native-elements';

interface Props {
    placeHolder: string;
    onChangeText: (text: string) => void;
}

const MyTextInput = (inputs: Props) => (
    <View>
        <Input
            inputStyle={{ textAlignVertical: 'top' }}
            placeholder={inputs.placeHolder}
            onChangeText={(text) => inputs.onChangeText(text)}
            multiline={true}
            maxLength={2000}
        />
    </View>
);

export default MyTextInput;

截图：

长占位符：

用户输入文字：

文本输入高度不缩小：

Answer 1

在 inputStyle 上添加 minHeight 和 maxHeight 应该可以解决您的问题。

Answer 2

设置 clearTextOnFocus 属性将起作用

<Input
        clearTextOnFocus={true}
        inputStyle={{ textAlignVertical: 'top' }}
        placeholder={inputs.placeHolder}
        onChangeText={(text) => inputs.onChangeText(text)}
        multiline={true}
        maxLength={2000}
    />

Answer 3

最后，我添加了一个额外的 value 道具，这样每当用户开始输入时，inputs.onChangeText(text) 就会更新 value，并且输入的高度会自动缩放到符合内容。当 value 为空或清除时，仅显示 placeHolder.

interface Props {
    placeHolder: string;
    onChangeText: (text: string) => void;
    value: string;
}

const MyTextInput = (inputs: Props) => (
    <View>
        <Input
            inputStyle={{ textAlignVertical: 'top' }}
            value={inputs.value}
            placeholder={inputs.placeHolder}
            onChangeText={(text) => inputs.onChangeText(text)}
            multiline={true}
            maxLength={2000}
        />
    </View>
);

React Native - 占位符的长度优先于多行输入的高度

React Native - Length of placeholder takes precedence in multiline-input's height

javascript

android

textinput

typescript

react-native

问题：

我的代码：

截图：