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

Question

我正在尝试使TextInput实现自动缩放，也就是说，当文本折行到下一行时，TextInput的高度会增加。

因此，我正在尝试计算文本的宽度，并将其与TextInput的宽度进行比较。如果它大于宽度，则TextInput的高度将增加。

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

谢谢！

- YiFeng

Answer 1

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

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

同时，这里有一个解决方法来实现你所描述的功能：

1. 创建一个带有初始（固定）高度的 TextInput。

2. 创建一个克隆的 <Text> 元素，它与 TextInput 具有相同的样式，放在屏幕外（例如使用绝对定位）。由于 React 的 style 属性具有声明性质，这很容易实现。将宽度设置为与 TextInput 相同的宽度。

   • 如果您的 TextInput 具有响应式宽度，则可以查看 onLayout 或 measure 来获取宽度，否则有自动渲染克隆具有相同宽度的方法（例如将其放置在相同的容器中但在屏幕外）。

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

尽管这可能有点麻烦，但您只需要编写一次。它可以轻松地封装到组件中（例如），然后可以毫不费力地重复使用。

- tohster

---

在千钧一发的情况下完成了任务。非常详细的说明，谢谢！ - Toadums

Answer 2

虽然我没有回答问题，但我想指出，在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

- oar.garuna

---

我修复了这个例子（需要multiline={true}），并添加了一个使用Expo Snack的实时示例。 - Ben Clayton

@AnubhavGupta 这个解决方案只针对iOS。将 multiline 属性设置为 true 应该可以在Android上工作。 - oar.garuna