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

Posted 2023-03-15

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

【英文标题】：How to calculate the width of the text in a TextInput component in React Native?

【发布时间】：2015-08-29 10:38:19

【问题描述】：

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

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

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

谢谢！

【参考方案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。