在 React 中相对于容器缩放文本变化

Question

我正在使用 React.js，我希望输入文本适合它的容器，但是 onChange。

例如：如果用户输入“T”

然后他输入“E”，所以现在输入的是“TE”

Answer 1

我创建了一个小应用程序来演示这一点。我正在使用几个状态

text

来管理文本框中的当前文本，以及

fontSize

用来计算文本的当前字体大小。我保留了 200 像素的上限和 50 像素的下限，这样文本看起来不会太大或太小。比率为

1.2

，这意味着每当添加新字符时，文本大小将增加到 1.2，如果删除字符，则大小将减少 1.2。这是一个应用程序。

import React, { useState, useCallback } from "react";

export default function App() {
  const [fontSize, setFontSize] = useState(200);
  const [text, setText] = useState("");
  const updateFontSize = useCallback(
    (value) => {
      if (text.length > value.length) {
        const textSize = Math.ceil(fontSize * 1.5, 10);
        fontSize < 200 && setFontSize(textSize);
      } else if (text.length < value.length) {
        const textSize = Math.ceil(fontSize / 1.5, 10);
        fontSize > 50 && setFontSize(textSize);
      }
      setText(value);
    },
    [fontSize, text]
  );
  return (
    <div className="App">
      <input
        type="text"
        onChange={(event) => updateFontSize(event.target.value)}
      />
      <div style={{ fontSize: `${fontSize}px` }}>{text}</div>
    </div>
  );
}

这里有一个代码沙箱链接供您参考。

Answer 2

react-scale-text模块也应该可以完成所需的工作。

Answer 3

在 2024 年，您可以将

adjustsFontSizeToFit

与

numberOfLines={1}

结合使用

  <Text
    numberOfLines={1}
    adjustsFontSizeToFit
  >
    {label}
  </Text>