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

【问题标题】：How to calculate the width of the text in a TextInput component in React Native?如何计算 React Native 中 TextInput 组件中文本的宽度？
【发布时间】：2015-08-29 10:38:19
【问题描述】：

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

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

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

谢谢！

【问题讨论】：

标签： ios react-native

【解决方案1】：

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

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

与此同时，以下是完成您所描述的解决方法：

创建具有初始（固定）高度的TextInput。
在屏幕外某处（例如使用绝对位置）创建一个克隆的<Text> 元素，其样式与TextInput 相同。由于 React 的 style 属性的声明性质，这很容易做到。将宽度设置为与您的 TextInput 相同的宽度。
- 如果您的TextInput 具有响应宽度，您可能需要查看onLayout 或measure 来获取宽度，否则有一些方法可以自动渲染具有相同宽度的克隆（例如，将其放在同一个容器，但在屏幕外）。
为TextInput 编写一个onChange 处理程序，其中： (a) 在TextInput 文本更改时更新克隆 (b) 测量克隆的高度（因为<Text> 元素自动调整大小） (c) 设置Textinput的新高度

虽然这有点痛苦，但你只需要写一次。它可以很容易地封装成一个组件（例如），然后您可以不受惩罚地重复使用它。

【讨论】：

在紧要关头完成工作。很好的指导，谢谢！

【解决方案2】：

虽然我没有回答问题，但我想指出自动缩放TextInput 可以在 React Native 0.34 中轻松实现。

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

世博小吃示例https://snack.expo.io/HkqE2AhAe

【讨论】：

我修复了示例（需要 multiline={true}）并添加了一个带有 Expo Snack 的实时示例。
@AnubhavGupta 该解决方案仅适用于 iOS。将 multiline 属性设置为 true 应该适用于 Android。