react-native-measure-text如何计算高度？无需渲染测量React Native文本组件高度

核心逻辑 #

这个库的核心就是绕开React Native的组件渲染流程，直接调用原生平台的文本排版计算API，在原生层完成文本尺寸的计算后，把结果返回给JS层，全程不需要将文本组件挂载到视图树或渲染到屏幕上。

iOS端实现细节 #

iOS平台依赖CoreText框架完成文本测量：

• 接收JS侧传递的参数：文本内容、字体名称、字号、字重、容器最大宽度等
• 根据参数创建NSAttributedString，把文本和对应的字体样式绑定
• 通过CTFramesetterCreateWithAttributedString生成排版器，再调用CTFramesetterSuggestFrameSizeWithConstraints方法，传入容器宽度和无限大的高度约束，计算出文本在指定宽度下的实际高度
• 将计算得到的高度值回传给JS层

Android端实现细节 #

Android平台借助TextPaint和StaticLayout完成计算：

• 接收JS参数后，初始化TextPaint对象，设置对应的字体大小、字重、字体族等样式
• 创建StaticLayout.Builder实例，传入文本内容、TextPaint对象、容器最大宽度，同时配置换行规则、文本对齐方式等排版参数
• 调用build()生成StaticLayout对象，直接获取该对象的getHeight()值，就是文本在指定宽度下的实际高度
• 将高度结果返回给JS层

为什么能做到不渲染 #

不管是iOS的CoreText还是Android的StaticLayout，都是纯内存计算的排版工具，不需要将文本视图添加到系统的视图层级中，只是在内存中模拟文本的排版过程并计算尺寸，所以完全不会在屏幕上产生任何可见的渲染内容。

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