javascript - React Native 的响应式屏幕

Question

如何为在 iOS 和 Android 平台上的所有设备上同等扩展的应用程序编写 React Native 样式表？我尝试使用 react-native-responsive-screen 包，但没有一个包真正有助于正确缩放应用程序，尤其是在使用边距和填充对齐内容时。关于如何克服这个问题有什么建议吗？

Answer 1

除了使用 flex 布局系统，到目前为止我所做的是编写一个缩放函数，它使边距和字体大小适应不同的屏幕大小。

垂直边距示例:

const HEIGHT_SCALE = 667; // this is the standard iphone 7 height, but you can use a different height as your standard height. 
const scaleMargins = (margin) => {
    const ratio = margin / HEIGHT_SCALE; 
    const newScale = Math.round(ratio * SCREEN_WIDTH);
    return newScale; 
}

const MARGIN_15 = scaleMargins(15);

使用示例:

<Text style={{ marginTop: MARGIN_15, marginBottom: MARGIN_15 }}>
Your Text with adaptive margins goes here
</Text>

优点

您还可以调整 scaleMargins 函数以具有响应式字体大小或水平边距/填充。因此只需使用不同的比例因子。对于水平边距，您可以使用此缩放功能:

const WIDTH_SCALE = 375; // Standard iphone 7 screen width. You can get it from Dimension.get('screen').width 
const scaleVerticalMargins = (margin) => {
    const ratio = margin / WIDTH_SCALE; 
    const newScale = Math.round(ratio * SCREEN_WIDTH);
    return newScale; 
}

另一个优势:您可以创建一个全局样式类，您可以在其中为整个应用计算一次所有必要的边距等。