expo inputText 设置一个默认高度 在输入后自动增高
时间: 2024-03-08 12:48:44 浏览: 90
你可以使用 `TextInput` 组件的 `multiline` 属性来让它支持多行文本输入,并使用 `onContentSizeChange` 属性来监听内容大小的变化,从而动态设置输入框的高度。以下是一个示例代码:
```javascript
import React, { useState } from 'react';
import { TextInput } from 'react-native';
const InputWithAutoHeight = () => {
const [inputValue, setInputValue] = useState('');
const [inputHeight, setInputHeight] = useState(40);
const handleContentSizeChange = (event) => {
setInputHeight(event.nativeEvent.contentSize.height);
};
return (
<TextInput
multiline
value={inputValue}
onChangeText={setInputValue}
onContentSizeChange={handleContentSizeChange}
style={{ height: inputHeight }}
/>
);
};
export default InputWithAutoHeight;
```
在上面的代码中,我们使用 `useState` 钩子来维护输入框中的值和高度。当输入框的内容大小发生变化时,`handleContentSizeChange` 函数会被调用,我们可以从 `event.nativeEvent.contentSize.height` 属性中获取新的高度,然后通过 `setInputHeight` 函数来更新输入框的高度。最后,在 `style` 属性中使用 `inputHeight` 来设置输入框的高度即可。这样,当用户输入多行文本时,输入框的高度会自动增加。
阅读全文