RN Android全面屏适配

时间:2021-12-25 05:56:16

像现在市面上新出的手机,例如华为P30 pro,小米9,iPhone XS MAX,屏占比都惊人的达到90%以上,这些手机具备了以下几个特点

  • 大,屏占比高,长宽比都不再是16:9,都达到了19.5:9甚至是更高
  • 短边的像素、density的取值都是一样的,所以需要适配的是长边

他们具备以上特点的同时带了以下问题

  • 传统布局的高度不足,导致上下留黑边
  • 基于屏幕顶部或底部的布局,如弹框,在全面屏手机上会发生位移
  • 安全区域问题

解决方案

应用通过如下两周方法修改AndroidManifest.xml均可以默认全屏显示:

  • 1.针对Activity添加android:resizeableActivity = "true",此设置只针对Activity生效,且增加了此属性该activity也会支持分屏显示
  • 2.设置targetSdkVersion>=26,也就是O版本

应用通过如下两种方式局可以设置应用支持的最大显示比例,如果应用设置的支持的最大比例是2,而设备实际比例是2.5,则还是无法全屏显示,会出现黑边:

  • 1.添加android:MaxAspectRatio,此设置项均可以针对Application和Activity生效,对应的是应用支持的最大比例,此属性需要基于O版本开发环境才可以编译通过
  • 2.添加android.max_aspect
<!--适配全面屏-->
<meta-data
android:name="android.max_aspect"
android:value="2.1"
/>

对于Android的全面屏适配以上都是在Native部分需要做的处理,JS部分的要求主要是要注意在长边更长的情况下图标,图片的适配