React Native为何存在60fps帧率限制？适配ProMotion的技术原因探究

《React Native官方文档》提到：“使用React Native而非基于WebView的工具的一个重要原因是实现每秒60帧（60 frames per second）的帧率以及应用的原生外观和体验”

如今不少iPhone和iPad配备了支持最高120fps的ProMotion显示屏，这项技术已推出三年有余，但React Native仍未适配原生高帧率，下面就解析背后的技术原因，以及关于导航方法的疑问。

一、无法适配120fps的核心技术原因 #

• JS与原生线程的同步开销：React Native的UI更新流程是JS线程先计算布局、处理状态，再把渲染指令传给原生线程执行。120fps要求每帧耗时仅约8.3ms，但JS线程本身可能被业务逻辑占用，加上跨线程通信的延迟，很难稳定卡在这个时间窗口内。而原生iOS应用的UI操作直接在主线程运行，能更灵活地响应ProMotion的动态帧率变化。
• 默认渲染管线的帧率锁定：React Native的核心框架最初是按60fps设计的，内部的动画调度、布局计算逻辑都以16.7ms（60fps的单帧耗时）为基准。比如内置的LayoutAnimation API，其时间间隔是固定死的，没有动态适配设备当前刷新率的机制。
• 生态兼容的滞后性：大量第三方UI组件、动画库（比如早期版本的Reanimated）都是基于60fps开发的，要适配120fps得修改底层动画驱动逻辑，这涉及到整个生态的调整，推进起来需要时间。

二、关于push/present导航的疑问 #

push和present这类导航操作确实会调用UIKit的原生方法，但React Native的封装层限制了帧率适配：

• React Navigation这类导航库会在JS层做一层封装，过渡动画的部分逻辑是在JS端处理的，而非完全交给原生UIKit的动画系统。这就导致哪怕原生导航支持120fps，JS层的调度延迟也会拖慢整体帧率，达不到原生流畅度。
• 部分原生导航的动画参数被React Native固定为60fps配置，没有根据设备刷新率动态调整，所以导航过渡只能以60fps运行。

社区相关问题示例 #

• React Native官方仓库问题：开发者反馈ProMotion设备上，应用的动画和滚动只能跑60fps，没法利用120fps刷新率，官方确认这是当前框架的限制，需要修改渲染管线来支持动态帧率。
• Reanimated仓库问题：开发者发现用Reanimated 2的原生驱动动画，在ProMotion设备上还是达不到120fps，排查后发现是动画驱动被锁定在60fps，需要添加动态适配设备刷新率的逻辑。

内容的提问来源于stack exchange，提问作者Jake Chasan