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

【问题标题】：how to make the layout adapt to the screen size in react native?react native如何让布局适应屏幕大小？
【发布时间】：2019-02-18 16:46:15
【问题描述】：

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

例如：

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

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

【问题讨论】：

使用什么单位来确定元素的大小？您是否尝试过视口单位（vw、vh、vmin）？
我是新手反应原生，我只是把 style = {{width: 360, height: 50}}
我很抱歉；你这样做是正确的，因为 RN 大小是无单位的。

标签： reactjs react-native layout native

【解决方案1】：

简单的答案是添加一个根据屏幕大小调整尺寸（或字体大小）的函数。但根据我的个人经验，我不建议使用它，因为您最终可能会在大型手机和平板电脑上使用巨大的图片或文本。我目前正在使用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',
    }
  }
});

【讨论】：