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

ell*_*kay 0 font-size dimensions reactjs react-native responsive

如何根据视图更改字体大小,因为 flex-box 不允许以百分比更改其字体大小。我尝试使用维度,但没有奏效。

Tim*_*Tim 8

您可以使用以下代码片段缩放 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; 
}
Run Code Online (Sandbox Code Playgroud)

现在您可以scaleFontSize使用标准 fontSize进行调用,它会自动缩放。