简体   繁体   English

如何在React Native中使字体大小响应

[英]How to make font-size responsive in react native

How to change the font-size according to the view since flex-box doesn't allow changing its font-size in percent. 由于flex-box不允许以百分比形式更改其字体大小,因此如何根据视图更改字体大小。 I tried using dimension but that did not work. 我尝试使用尺寸,但这没有用。

You could scale your fontSize with this code snippet: 您可以使用以下代码段缩放fontSize:

SCREEN_WIDTH = Dimensions.get('window').width; // get current width
SCALE = 375; // constant, 375 is standard width of  iphone 6 / 7 / 8 

const scaleFontSize = (fontSize) => {
    const ratio = fontSize / SCALE; // get ratio based on your standard scale 
    const newSize = Math.round(ratio * SCREEN_WIDTH);
    return newSize; 
}

Now you can call scaleFontSize with your standard fontSize and it will automatically be scaled. 现在,您可以使用标准fontSize调用scaleFontSize ,它将自动缩放。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM