React Native使用useState动态修改animateCamera的pitch和zoom不生效问题

问题相关代码片段：

onLayout={() => {
    map.current.animateCamera({
        center: { latitude: location?.coords?.latitude, longitude: location?.coords?.longitude },
        zoom: zoomLevel,
        heading: 50,
        pitch: pitchLevel,
        altitude: 5,
    })
}}

经排查，onLayout在处理transform变换时无法正常运行。

当前已验证的onLayout与.measure未公开特性/已知bug： #

• onLayout在部分场景下不会触发，常见于元素因父组件resize发生移动时
• Android端measure返回undefined，除非视图上绑定了onLayout或设置collapsable: false
• onLayout不会将transform纳入计算，返回的是视图的内部尺寸，而非屏幕上显示的实际尺寸
• onLayout不会在transform动画执行时触发——这几乎涵盖了所有动画场景，因为只有transform和opacity可以使用原生驱动（native driver），也正是本次问题的触发原因
• measure返回的宽高值与onLayout不同。如果任意父组件设置了缩放，它会返回缩放后的值而非原始值，与官方文档描述相反
• 如果视图或任意父组件正在执行动画，部分甚至全部场景下onLayout会在组件挂载期间返回错误/随机值

问题根本原因 #

transform变换完全不涉及布局流程。实际上Animated库无法修改任何会改变组件树布局的属性。

可参考React Native直接操作相关的官方说明，后续如果找到可行解决方案会补充对应代码片段。

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