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

Question

我试图让 TextInput 自动缩放，也就是说，TextInput 的高度随着文本换行到下一行而增加。

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

那么我的问题是如何计算文字的宽度呢？有没有其他方法可以实现自动缩放的效果？

谢谢!

Answer 1

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

React Native 非常需要像您描述的那样自动调整文本输入的大小。我也可以用一个，所以当我有空的时候，我可能会尝试写一个。

与此同时，这里有一个解决方法来完成您所描述的:

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

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

   • 如果您的 TextInput有响应宽度，你可能想看看 onLayout , 或 measure 获取宽度，否则有一些方法可以自动呈现具有相同宽度的克隆(例如，将其放置在同一容器中但不在屏幕上)。

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

虽然这有点痛苦，但您只需编写一次。它可以很容易地封装到一个组件中(例如 )，然后您可以不受惩罚地重复使用它。