Question

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

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

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

谢谢！

Answer 1

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

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

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

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

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

Answer 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

Expo Snack示例https://snack.expo.io/HkqE2AhAe

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

2 个答案: