React native 响应本地响应问题

我使用的是

flex

、

EStyleSheet

和

$rem

。我避免使用高度、宽度、边距的绝对值，并在我的组件的所有位置使用

%

。但是，在不同的屏幕分辨率上，我的组件的位置看起来不同

例如，

My company

徽标在较小的屏幕上（或由于Android/iOS）较低，而且页面底部的空间也小得多（第二张图片）

你能解释一下为什么会发生这种情况以及如何解决它吗

从“React”导入React；
从“react native”导入{视图、样式表、文本、ImageBackground、TouchableHighlight、图像、维度}；
从'react redux'导入{connect}；
从“react native extended stylesheet”导入EStyleSheet；
类SignInUpGender扩展React.Component{
render（）{
返回(
我的公司
嘿，你是。。。
this.props.handleNext（'MALE'）}>
男性的
this.props.handleNext（'FEMALE'）}>
女的
或
已经注册了吗？
登录
)
}
}
导出默认连接（MapStateTrops、mapDispatchToPros）（SignInUpGender）；
const entireScreenWidth=维度.get（'window'）.width；
build（{$rem:entireScreenWidth/380}）；
const styles=EStyleSheet.create({
图片：{
弹性：1，
},
LogoView：{
弹性：2，
为内容辩护：“中心”，
flexDirection:'行'，
},
注册视图：{
弹性：1，
},
欢迎浏览：{
对齐项目：“中心”
},
性别观点：{
flexDirection:'行'，
justifyContent:“间距”
},
标志：{
马金托普：“16%，
fontSize:'36rem'，
fontWeight:'粗体'，
颜色：“#FFFFFF”，
不透明度：0.7，
字母间距：“12rem”，
},
性别扣：{
弹性：1，
边界半径：10，
边框宽度：1.5，
边框颜色：'#FFFFFF'，
填充：“8rem”，
利润率：2%
},
GenderAndIconView：{
flexDirection:'行'，
为内容辩护：“周围的空间”，
},
性别文本：{
颜色：“#FFFFFF”，
fontSize:'16rem'，
自我定位：“中心”
},
性别：{
宽度：“26rem”，
高度：'26雷姆'，
},
问候文字：{
颜色：“#FFFFFF”，
fontSize:'22rem'，
fontWeight:'粗体'，
marginBottom：“5rem”
},
OrBorderView：{
保证金：“10雷姆”，
flexDirection:'行'，
为内容辩护：“周围的空间”
},
边界：{
弹性：1，
背景颜色：'#E8E8E8'，
身高:1,，
边界半径：1，
自我定位：“中心”
},
OrText：{
alignSelf:“中心”，
水平方向：5rem，
fontSize:'14rem'，
容重：“500”，
颜色：'#E8E8E8'
},
AlreadyRegisteredView：{
flexDirection:'行'，
为内容辩护：“中心”，
},
AlreadyRegisteredText：{
颜色：'#E8E8E8'，
fontSize:'14rem'，
},
签名文字：{
fontSize:'14rem'，
重量：'600'，
textDecorationLine:“下划线”，
颜色：“#FFFFFF”，
边缘左图：“5rem”
}
});

您需要屏幕上具有纵横比的多个图像，因为有很多，因为当您使用不同的纵横比调整图像大小（成比例）时，这会导致图像失真，或者您需要中心位置图像，当您使用相同的纵横比时，您只需要调整大小

所以你们的例子就像是下一个样本图像，因为纵横比是不同的

在html中，您可以：

 <picture>
      <source srcset="extralarge.jpg" media="(min-height: 1000px)">
      <source srcset="large.jpg" media="(min-height: 500px)">
      <img srcset="medium.jpg" alt="">
    </picture>

---

是介于“屏幕大小”还是Android和iOS之间？@MCMatan，当我在Iphone 5s上运行时，页面底部的空间仍然较小，但是，我的公司徽标看起来更好。但是如果你看图片，为什么我在Android上的底部按钮比在Iphone X上的要低？这应该与图像本身无关。因为宽度相同，但高度不同，但使用flex时，它应该按比例分布。但如果屏幕的纵横比相同，如5:3，您是否介意更新您的答案，以更详细地解释它？我还是不明白。

 <picture>
      <source srcset="extralarge.jpg" media="(min-height: 1000px)">
      <source srcset="large.jpg" media="(min-height: 500px)">
      <img srcset="medium.jpg" alt="">
    </picture>

   .img {
  background-image: url(medium.jpg);
}
@media (min-height: 500px) {
  .img {
    background-image: url(large.jpg);
  }
}
@media (min-height: 1000px) {
  .img {
    background-image: url(extralarge.jpg);
  }
}