【问题标题】：React Native - Length of placeholder takes precedence in multiline-input's heightReact Native - 占位符的长度优先于多行输入的高度
【发布时间】：2019-07-10 02:47:42
【问题描述】：

问题：

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

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

我的代码：

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;

截图：

长占位符：

用户输入文本：

文本输入高度不会缩小：

【问题讨论】：

标签： javascript android typescript react-native textinput

【解决方案1】：

最后，我添加了一个额外的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>
);

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

设置 clearTextOnFocus 道具将起作用

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

【讨论】：