1

私は小さな反応ネイティブ アプリケーションに取り組んでいます。ページの 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