Skip to content

feat: text 拓展能力支持#2324

Open
yandadaFreedom wants to merge 16 commits intomasterfrom
feat-extend-text
Open

feat: text 拓展能力支持#2324
yandadaFreedom wants to merge 16 commits intomasterfrom
feat-extend-text

Conversation

@yandadaFreedom
Copy link
Collaborator

@yandadaFreedom yandadaFreedom commented Nov 14, 2025

  1. 小程序 / Web / RN 的 Text 组件新增 enable-max-lines 属性,支持单行及多行文本的省略打点样式。

  2. RN 的 Text 组件新增 enable-add-space、space-font-size 属性,支持在文本尾部补空格能力,用于规避小米 HyperOS 系统下 Text 组件出现的“吞字”问题。

  3. RN 的 Text 组件新增 enable-android-align-center 属性,开启后组件样式将默认增加 includeFontPadding: false 与 textAlignVertical: 'center' 配置

以上扩展能力直接使用 View 包裹文本节点的场景均不支持

overflow: 'hidden',
whiteSpace: (${parsed.result}) <= 1 ? 'nowrap' : '',
textOverflow: (${parsed.result}) <= 1 ? 'ellipsis' : '',
WebkitBoxOrient: 'vertical',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为啥需要这两?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

把这段样式拼接到静态style前面就可以了吧


// 处理 max-lines 跨平台属性
function processMaxLines (el) {
const maxLinesAttr = getAndRemoveAttr(el, 'enable-max-lines')
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

processTextMaxLines,只处理Text节点

let children = inlineTextProps.children

// 如果启用了 enable-add-space,在末尾追加一个空格节点
if (enableAddSpace) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inlineText不需要支持吧
多个地方使用抽一个公共方法
测试性能开销

Copy link
Collaborator Author

@yandadaFreedom yandadaFreedom Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iphone 13,渲染 1000 个 text 组件

<text class="perf-text" enable-add-space="{{enableAddSpace}}">{{ text }}</text>

enableAddSpace = true:

  • useAddSpace hook 平均耗时 0.0086 ms
  • mpx-text 组件平均耗时 0.0795 ms

enableAddSpace = false

  • useAddSpace hook 平均耗时 0.0006ms
  • mpx-text 组件平均耗时 0.0673 ms

// 如果启用了 enable-add-space,在末尾追加一个空格节点
if (enableAddSpace) {
const spaceNode = createElement(Text, {
style: spaceFontSize ? { fontSize: spaceFontSize } : undefined
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spaceFontSize判断放到外面,没有这个都不需要传递props

return invokeCallback
}

export function useAddSpace (children: ReactNode, { enableAddSpace, spaceFontSize }: { enableAddSpace?: boolean, spaceFontSize?: number }) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个不是个hook不应该叫use

processMpxTagName(el)

// 处理 enable-max-lines 跨平台属性(在平台规则处理之前)
processTextMaxLines(el)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

放在平台规则处理之后,支持overflow属性,同时平台规则处理可以校验overfolow属性

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

继续放在平台转换之前,函数名统一改为preProcessXXX

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants