如何计算React Native中TextInput组件中文本的宽度？

Question

我试图让TextInput自动缩放,也就是说,当文本被包装到下一行时,TextInput的高度会增加.

所以我试图计算文本的宽度,并将它的宽度与TextInput的宽度进行比较.如果它大于宽度,TextInput的高度将增加.

所以我的问题是如何计算文本的宽度？还有其他方法可以实现自动缩放效果吗？

谢谢!

Answer 1

目前没有简单的方法来获得a的内部内容宽度TextInput.

React Native非常需要像你描述的那样自动调整文本输入.我也可以使用一个,所以当我找时间时,我可能会尝试写一个.

与此同时,这是完成您所描述的内容的解决方法:

1. 创建您TextInput的初始(固定)高度.

2. 在<Text>屏幕外的某处创建一个克隆元素(例如使用绝对位置),其样式与TextInput.由于React style属性的声明性质,这很容易做到.将宽度设置为与您的宽度相同的宽度TextInput.

   • 如果您TextInput有响应宽度,您可能需要查看onLayout或measure获取宽度,否则有方法可以自动渲染具有相同宽度的克隆(例如,将其放在同一容器中但在屏幕外).

3. 编写一个onChange处理程序TextInput:(a)在TextInput文本发生变化时更新克隆(b)测量克隆的高度(因为<Text>元素自动调整大小)(c)设置新的高度Textinput

虽然这是一种痛苦,但你只需要写一次.它可以很容易地封装到一个组件(例如)中,然后您可以重复使用而不受惩罚.