React Native不同屏幕尺寸下UI缩放适配问题咨询

直接给结论：单独靠百分比作为尺寸单位，没法实现全机型的正确UI缩放，它只适合特定布局场景，搭配其他适配方案才能覆盖不同手机的适配需求。

百分比单位的适用场景 #

• 做父容器内的比例分配时非常好用：比如横向双栏布局各占一半宽度、通栏按钮撑满容器宽度、卡片内封面图占容器顶部40%高度这类明确需要按父容器尺寸占比排布的场景，用百分比写的代码会自动跟随父容器尺寸变化，不需要手动计算数值，比写死固定dp值灵活。

单独使用百分比的常见坑（你只在单台实体机测试很容易忽略） #

• 百分比的计算基准是直接父容器，不是全局屏幕尺寸。如果你在未设置确定高度的滚动容器、内容自适应高度的父组件里给子元素写百分比高度，会直接出现布局失效，比如在ScrollView里给子组件设height: '50%'是不会生效的，因为ScrollView本身的高度由内容决定，没有固定参考值。
• 百分比解决不了不同手机宽高比差异带来的适配问题。比如你自用的测试机是20:9的细长屏，给卡片设height: '30%'，换到16:9的旧安卓机上，卡片实际高度会比你在自己手机上看到的高近20%，很容易出现内容溢出、布局挤压；如果是折叠屏展开的宽屏状态，按百分比计算的控件尺寸会异常偏大，视觉上非常不协调。
• 百分比不适合用来设置字体、图标、固定边距这类精细尺寸。比如你给字体设成屏幕宽度的5%，在小屏手机上字会小到难以辨认，在大屏设备上又会大得突兀，完全不符合正常的视觉大小逻辑。

新手友好的适配方案搭配建议 #

• 优先用Flexbox弹性布局做基础排布，RN默认的Flex布局就能解决80%以上的对齐、自适应排布需求，靠flex属性做的弹性适配比写百分比更稳定，不会出现父容器基准不对就失效的问题。
• 百分比只用来处理明确需要占父容器固定比例的场景，不要全页面所有尺寸都用百分比。
• 字体、边距、图标这类固定视觉比例的元素，可以基于你当前用的测试机做基准写个简单的换算工具：先获取你测试机的屏幕宽度dp值作为基准，比如你的测试机宽度是360dp，设计稿上16dp的边距，就按实际尺寸 = (设计稿尺寸 / 基准屏宽度) * 当前设备屏幕宽度的逻辑计算，算出来的尺寸在不同宽度的手机上，视觉比例和你在自己测试机上看到的效果完全一致。
• 如果要适配横竖屏、折叠屏这类尺寸变化幅度大的场景，配合Dimensions API监听屏幕尺寸变化做动态调整即可，不要硬靠百分比硬撑。

最后提个醒：你现阶段只在单台实体机测试的话，哪怕用了适配方案，最好也开安卓模拟器切几个不同分辨率、不同宽高比的虚拟设备看一眼，很多单台设备上看不出的布局问题，换个尺寸一眼就能发现。

内容的提问来源于stack exchange，提问作者John George