iOS 15下React Native Dimensions API相关渲染问题及解决方案问询
部分升级到iOS 15(2021年9月20日发布)的用户反馈,依赖useWindowDimensions或Dimensions.get('window')获取窗口尺寸信息的组件出现了渲染异常。
对于iOS 15系统用户,首次冷启动应用时,useWindowDimensions和Dimensions.get('window')会返回0或者负值。根据组件对这两个API的使用逻辑不同,该异常最好的情况下会在下一次应用激活或其他Dimensions更新事件触发后恢复,最坏的情况下则完全无法自行修复。
我已在GitHub向React-Native仓库提交了Pull Request追踪该问题。
iOS端的RCTDeviceInfo.mm文件会在特定iOS生命周期事件触发时(比如应用激活、无障碍事件触发)通知RN侧更新Dimensions字典数据。
我建议在RCTDeviceInfo.mm中新增一个RCTContentDidAppearNotification的监听器,diff代码如下:
--- node_modules/react-native/React/CoreModules/RCTDeviceInfo.mm +++ node_modules/react-native/React/CoreModules/RCTDeviceInfo.mm @@ -14,6 +14,7 @@ #import <React/RCTEventDispatcher.h> #import <React/RCTUIUtils.h> #import <React/RCTUtils.h> +#import <React/RCTRootView.h> #import "CoreModulesPlugins.h" @@ -71,6 +72,11 @@ name:RCTUserInterfaceStyleDidChangeNotification object:nil]; + [[NSNotificationCenter defaultCenter] addObserver:self + selector:@selector(interfaceFrameDidChange) + name:RCTContentDidAppearNotification + object:nil]; + #endif }
RCTContentDidAppearNotification事件是React iOS库在React Native包初始化完成、根应用组件视图可以被添加到RCTRootView.m的视图中并展示时已有的原生事件。监听该事件可以保证RN侧已准备好接收尺寸更新事件,组件可以可靠获取到预期的窗口尺寸数值。
想了解有多少开发者遇到过该问题?以及大家是通过什么解决方案/临时workaround规避iOS 15下内容被「压缩」或者完全无法展示的渲染异常的?
内容的提问来源于stack exchange,提问作者Kelvin Kosbab

