1

我正在开发一个小型反应本机应用程序。其中一页是静态的，由大量图片和文字组成。我正在使用 react-native-paper，其中每张卡片都有一个标题和图片，有时还有一段文字。

我遇到了一个问题，图片在我的 Pixel 4XL 上看起来不错，但在我的 iPad Pro 上会被截断。我尝试遵循一个指南，该指南将考虑正在使用的设备并缩放 react-native-paper 卡和封面（图片本身）以适合，但它似乎并没有按照我想要的方式行事。所有卡片都有cardTest风格，所有封面都有pictureTest风格。

iPad Pro 上的第一张卡片

Pixel 4XL 上的第一张卡

const { width, height } = Dimensions.get("window");

const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => (width / guidelineBaseWidth) * size;
const verticalScale = size => (height / guidelineBaseHeight) * size;
const moderateScale = (size, factor = 0.5) => size + (scale(size) - size) * factor;
.
.
.
cardTest: {
    width: moderateScale(550),
    height: verticalScale(275),
    padding: scale(10)
  },

pictureTest: {
    width: moderateScale(380, 0.3),
    height: verticalScale(230, 0.5)
  },

任何帮助或一般反馈将不胜感激！

4

1 回答 1

0

您将要设置宽度/高度变量以动态响应屏幕尺寸。最简单的方法是使用基于百分比的宽度/高度值，例如width: '60%'占据设备屏幕宽度的 60%。不过，这种方法有一些注意事项。基于百分比的宽度的渲染在小型/大型设备之间可能看起来非常不同。

实现这种布局的另一种方法是使用 flexbox。与 CSS flexbox 类似，React Native 有一个用于进行 flex 布局的系统。你可以在这里阅读更多关于它的信息。将 flexbox 与基于百分比的元素大小相结合可能是确保跨设备一致性的最佳选择。

于 2020-04-07T22:49:52.203 回答