Как рассчитать ширину текста в компоненте TextInput в React Native?

Я пытался сделать автоматический ввод TextInput, т.е. высота TextInput увеличивается, когда текст завернут в следующую строку.

Итак, я пытаюсь рассчитать ширину текста и сравнить его ширину ширины TextInput. Если он больше ширины, высота TextInput будет увеличиваться.

Итак, мой вопрос заключается в том, как рассчитать ширину текста? Существуют ли какие-либо другие способы для достижения эффекта автоматического масштабирования?

Спасибо!

Ответ 1

В настоящее время нет простого способа получить внутреннюю ширину содержимого TextInput.

React Native плохо нуждается в автоматическом вводе текста, как тот, который вы описываете. Я тоже мог бы использовать его, поэтому, когда я нахожу время, я могу попытаться написать его.

Тем временем, обходной путь для выполнения того, что вы описываете:

Создайте TextInput с его начальной (фиксированной) высотой.
Создайте клонированный элемент <Text> где-нибудь вне экрана (например, используйте абсолютное положение) с тем же стилем, что и TextInput. Это легко сделать благодаря декларативной природе атрибута React style. Установите ширину равной ширине, как ваш TextInput.
- Если ваш TextInput имеет гибкую ширину, вы можете посмотреть onLayout или measure, чтобы получить ширину, в противном случае есть способы автоматически визуализировать клон с одинаковой шириной (например, поместить его в один и тот же контейнер, но за кадром).
Напишите onChange обработчик для TextInput, который: (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