如何调整字体大小以适应Android版原生反应中的视图？

Question

如何在react native的视图中自动改变文本的字体大小？

我有不同长度的文本，其中一些不适合视图，所以减小了字体大小。我已经检查了文档，发现了这个，但它只适用于iOS，我需要它用于Android。

它与其他组件（如按钮和触摸不透明度）一起工作吗？

Answer 1

试试这种方法。考虑根据屏幕宽度设置字体大小，如下所示

width: Dimensions.get('window').width

因此，在您的风格中，尝试进行百分比计算，以使字体大小适合屏幕

style={
  text:{
     fontSize:0.05*width
  }
}

这将适用于所有屏幕（Android和IOS）

Answer 2

结合这两个道具，适用于Android和iOS：

adjustsFontSizeToFit={true}
numberOfLines={1}

调整字体大小ToFit确保字体不超过容器，numberOfLines确保文本停留在一行中。

不调整的字体大小调整为“数字”将做一个省略号，在没有数字的情况下，调整字体大小将减小文本的大小以适合包含视图的高度，如果包含视图具有固定的高度或宽度。

Answer 3

Jeffy Lee的代码稍微改进了一点

const AdjustLabel = ({
  fontSize, text, style, numberOfLines
}) => {
  const [currentFont, setCurrentFont] = useState(fontSize);

  return (
    <Text
      numberOfLines={ numberOfLines }
      adjustsFontSizeToFit
      style={ [style, { fontSize: currentFont }] }
      onTextLayout={ (e) => {
        const { lines } = e.nativeEvent;
        if (lines.length > numberOfLines) {
          setCurrentFont(currentFont - 1);
        }
      } }
    >
      { text }
    </Text>
  );
};