时间戳

首页 > 解决方案 > react native如何让布局适应屏幕大小？

reactjs - react native如何让布局适应屏幕大小？

问题描述

我想知道如何才能将布局的对象调整为手机或平板电脑屏幕的不同尺寸。

例如：

如果我为小屏幕（Nexus S）组装设计，它在那个屏幕上看起来不错，但如果我在像素 2 XL 中进行模拟，你会看到一切都很小。

如何调整元素或使用什么属性来适应所有屏幕尺寸？

标签： reactjsreact-nativelayoutnative

解决方案

简单的答案是添加一个根据屏幕大小调整尺寸（或字体大小）的函数。但根据我的个人经验，我不建议使用它，因为您最终可能会在大型手机和平板电脑上使用巨大的图片或文本。我目前正在使用react-native-extended-stylesheet它提供了很好的支持media-queries, variables, dynamic themes, relative units, percents, math operations, scaling and other styling stuff

您的代码将如下所示：

const styles = EStyleSheet.create({
  column: {
    width: '80%'                                    // 80% of screen width
  },
  text: {
    color: '$textColor',                            // global variable $textColor
    fontSize: '1.5rem'                              // relative REM unit
  },
  '@media (min-width: 350) and (max-width: 500)': { // media queries
    text: {
      fontSize: '2rem',
    }
  }
});

推荐阅读