如何设置随着用户输入长度的增长而动态增长的 TextInput 字段的初始高度(React Native)

问题描述 投票:0回答:1

My goal for initial display of TextInput

我在解决 React Native 中的 TextInput 字段问题时遇到困难。在我的表单的这一部分中,用户可能会输入很长的内容。因此,我希望 TextInput 框的大小动态增长并保持一致的填充。我已经解决了这个问题,但是,我想知道如何设置此框的初始高度,以仍然允许此多行动态功能持续存在。现在,当我尝试添加初始高度时,它删除了动态填充和多行功能。

这就是我的意思

The padding does not persist when I pass an initial height

我尝试过添加初始高度,并且我尝试过添加 minHeight。

当我使用 69 的高度时,它看起来不错,直到用户输入超过该高度。然后,边框和 textInput 之间的 8px 初始填充消失。

我尝试添加一个 minHeight,但这似乎给了它一个巨大的初始值。

Some code of my TextInput

css react-native responsive-design
1个回答
0
投票

像这样尝试一下,专注于

height: Math.max(35, height)
onContentSizeChange

const [height, setHeight] = useState(0);
const onContentSizeChange = event =>
            setHeight(Math.max(35, event.nativeEvent.contentSize.height));
   
(
<TextInput
  value={feedback}
  editable
  multiline
  numberOfLines={10}
  placeholder={'Write here...'}
  onChangeText={onTextChanged}
  onContentSizeChange={onContentSizeChange}
  style={{...styles.textInput, height: Math.max(35, height)}}
/>
)
© www.soinside.com 2019 - 2024. All rights reserved.