React Native Unistyles 中 forwardRef 与回调引用使用注意事项

问题现象

在使用 React Native Unistyles 库时，部分开发者在升级到 Expo SDK 53 和 React 19 后遇到了一个特定错误："forwardedRefReturnFn is not a function (it is Object)"。这个错误通常出现在同时使用 Unistyles 样式和 Reanimated 动画样式的组件中。

问题根源分析

经过深入调查，发现这个问题实际上与回调引用(ref)的使用方式有关，而非最初怀疑的 Reanimated 动画库。问题的核心在于回调引用的返回值处理不当。

错误使用模式

<Pressable
  ref={(ref) => (ref ? links.current.set(id, ref) : links.current.delete(id))}
/>

这种写法的问题在于回调函数返回了一个值（set/delete 操作的结果），而 React 的 ref 回调应该返回 void。

正确使用模式

<Pressable
  ref={(ref) => {
    ref ? links.current.set(id, ref) : links.current.delete(id)
  }}
/>

技术背景

在 React 中，ref 回调函数的设计初衷是用于访问 DOM 节点或 React 组件实例。根据 React 官方文档，ref 回调函数不应该返回任何值。当开发者无意中返回了非 undefined 的值时，可能会干扰 React 内部对 ref 的处理逻辑。

Unistyles 库内部使用了 React 的 forwardRef 机制来传递 ref，当遇到不规范的 ref 回调返回值时，就会触发 "forwardedRefReturnFn is not a function" 的错误。

最佳实践建议

1. 避免在 ref 回调中返回值：确保 ref 回调函数不返回任何值（或显式返回 undefined）

2. 样式组合顺序：当同时使用 Unistyles 样式和动画样式时，建议将 Unistyles 样式放在数组后面：

   <Animated.View style={[animatedStyle, styles.unistylesStyle]} />
   

3. 性能考虑：避免在渲染函数中动态创建样式对象，特别是与动画库结合使用时

总结

这个问题提醒我们，在使用 React 的 ref 机制时需要遵循其设计规范。看似微小的编码差异（如是否在箭头函数中使用大括号）可能会导致难以追踪的问题。特别是在使用像 Unistyles 这样的样式库时，保持代码规范性尤为重要。

对于使用 Unistyles 的开发者，建议审查代码中的 ref 使用方式，确保符合 React 的最佳实践，以避免类似问题的发生。