Question

我创建了一个文本输入，其中输入的文本长度决定了文本的字体大小。

想法是制作类似于Instagram的方式：https://media.giphy.com/media/1AgCjLrT0XWhUh4UqY/giphy.gif

现在，这就是我的能力，可以使用户体验突然变差（原因是字体大小更新延迟）：https://media.giphy.com/media/p37FFA1RhCuRHxIH2P/giphy.gif

这是我的代码：

render() {
  let updatedFontSize = 32;
  if(this.state.inputText.length > 0) {
      updatedFontSize = 150 - 8*(this.state.inputText.length);
      updatedFontSize = (updatedFontSize < 32 ? 32 : updatedFontSize);
  }
  return (
    <TextInput
      style={{ fontSize: updatedFontSize }}
      onChangeText={ (inputText) => { this.setState({inputText}) } }
      value={this.state.inputText}
      multiline={true}
      maxLength={25}
    />
  )
}

Answer 1

让我们考虑如何解决这个问题。

要求是：

效果只能在文本字段中至少包含3个字符时发生
字体大小可以达到最大和最小大小
如果输入的新文本比以前的值长，则字体应该变小。
如果输入的新文本比以前的值短，则字体应该变大。

基于gif的这些要求，我们可以提供一个干净的解决方案。

changeText = value => {
  if (value.length > 3) {
    if (
      this.state.value.length < value.length &&
      this.state.fontSize > MIN_FONT_SIZE
    ) {
      this.setState(({ fontSize }) => ({ fontSize: fontSize - INCREMENT, value }));
    } else if (
      this.state.value.length > value.length &&
      this.state.fontSize < MAX_FONT_SIZE
    ) {
      this.setState(({ fontSize }) => ({ fontSize: fontSize + INCREMENT, value }));
    }
  }
};

这里是完整的示例https://snack.expo.io/@roach_iam/increasing-fontsize-textinput。

平滑地更改TextInput的fontSize

1 个答案: