Question

对于在iOS和Android平台上的所有设备上均等缩放的应用程序，如何在react native中编写样式表？我尝试使用react-native-response-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; 
}

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

Answer 2

您必须在样式中使用flex道具，以帮助我们调整视图以适应屏幕的宽度和高度。

Answer 3

首先，您应该了解flexbox，然后使您的组件在所有设备上都完全可见。

在此过程中，某些库可以为您提供帮助。

react-native-lightweight-responsive很简单。

import Responsive from 'react-native-lightweight-responsive';

<View style={{
  width: Responsive.width(300),
  height: Reponsive.width(300),
}}/>

以上代码将使您的组件在所有设备上均可见。

React Native的响应式屏幕

3 个答案: