我正在尝试使TextInput实现自动缩放,也就是说,当文本折行到下一行时,TextInput的高度会增加。
因此,我正在尝试计算文本的宽度,并将其与TextInput的宽度进行比较。如果它大于宽度,则TextInput的高度将增加。
所以我的问题是如何计算文本的宽度?是否有其他方法可以实现自动缩放效果?
谢谢!
我正在尝试使TextInput实现自动缩放,也就是说,当文本折行到下一行时,TextInput的高度会增加。
因此,我正在尝试计算文本的宽度,并将其与TextInput的宽度进行比较。如果它大于宽度,则TextInput的高度将增加。
所以我的问题是如何计算文本的宽度?是否有其他方法可以实现自动缩放效果?
谢谢!
目前没有简单的方法来获取 TextInput
的内部内容宽度。
React Native 非常需要像你描述的那样自动调整大小的文本输入框。我也可以使用一个,所以当我有时间时,我可能会尝试编写一个。
同时,这里有一个解决方法来实现你所描述的功能:
创建一个带有初始(固定)高度的 TextInput
。
创建一个克隆的 <Text>
元素,它与 TextInput
具有相同的样式,放在屏幕外(例如使用绝对定位)。由于 React 的 style
属性具有声明性质,这很容易实现。将宽度设置为与 TextInput
相同的宽度。
为 TextInput
编写一个 onChange
处理程序,它:
(a) 在 TextInput
文本更改时更新克隆
(b) 测量克隆的高度(因为 <Text>
元素自动调整大小)
(c) 设置新的 Textinput
高度
虽然我没有回答问题,但我想指出,在React Native 0.34中可以轻松实现自动缩放的TextInput
。
class AutoScaleTextInput extends React.Component {
constructor() {
super();
this.state = {
inputHeight: 35
};
}
render() {
return (
<TextInput
multiline={true}
style={{
height: this.state.inputHeight
}}
onContentSizeChange={ this._onTextContentSizeChange }/>
);
}
_onTextContentSizeChange = (event) => {
this.setState({
inputHeight: Math.min(event.nativeEvent.contentSize.height, 100)
});
}
}
请参考:TextInput#onContentSizeChange
以下是Expo Snack示例:https://snack.expo.io/HkqE2AhAe
multiline
属性设置为 true 应该可以在Android上工作。 - oar.garuna