如何在React Native中使布局适应屏幕尺寸？

Question

我想知道我该怎么做，以便可以将布局的对象调整为手机或平板电脑屏幕的不同大小。

例如：

如果我为一个小屏幕（Nexus S）组装设计，那么它在那个屏幕上看起来不错，但是如果我以像素2 XL进行仿真，那么一切都会变小。

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

Answer 1

简单的答案是添加一个根据screenSize调整尺寸（或fontSize）的函数。但是从我的个人经验来看，我不建议您使用它，因为这样可能会在大型手机和平板电脑上显示大量的图片或文字。我目前正在使用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',
    }
  }
});