diff --git a/docs-vitepress/guide/rn/component.md b/docs-vitepress/guide/rn/component.md index a00d2ce3db..78f4dfc856 100644 --- a/docs-vitepress/guide/rn/component.md +++ b/docs-vitepress/guide/rn/component.md @@ -80,12 +80,17 @@ | ----------------------- | ------- | ------------- | ---------------------------------------------------------- | | user-select | boolean | `false` | 文本是否可选。 | | is-simple | - | - | RN环境特有标记,设置后将使用简单版本的 text 组件渲染,该组件不包含 css var、calc、ref 等拓展功能,但性能更优,请根据实际情况设置 | +| enable-max-lines | number | - | 跨平台属性,开启后 web/小程序/rn 环境均生效。用于限制文本最大行数, 文本溢出仅支持尾部打点模式| +| enable-android-align-center | boolean | `false` | RN环境特有属性,开启后 Text 组件样式将默认增加 includeFontPadding: false 与 textAlignVertical: 'center' 配置 | +| enable-add-space | boolean | `false` | RN环境特有属性,开启后将在文本尾部补一个空格字符,用于规避小米 HyperOS2 系统下 RN Text 组件出现“吞字”问题 | +| space-font-size | number | - | RN环境特有属性,用于设置空格大小,与 `enable-add-space` 配合使用 | > [!tip] 注意 > - 未包裹 text 标签的文本,会自动包裹 text 标签。 > - text 组件开启 enable-offset 后,offsetLeft、offsetWidth 获取时机仅为组件首次渲染阶段 +> - enable-add-space、enable-android-align-center、space-font-size 仅 text 组件支持,使用 view 组件直接包裹文本的场景不支持 ### scroll-view 可滚动视图区域。 diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/text.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/text.js index beb854cb4d..5c8282ced0 100644 --- a/packages/webpack-plugin/lib/platform/template/wx/component-config/text.js +++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/text.js @@ -49,7 +49,7 @@ module.exports = function ({ print }) { qa: qaPropLog }, { - test: /^(space|decode)$/, + test: /^(space)$/, ios: iosPropLog, android: androidPropLog, harmony: harmonyPropLog diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-simple-text.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-simple-text.tsx index bdebcccedf..6924efab91 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-simple-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-simple-text.tsx @@ -1,24 +1,40 @@ -import { Text, TextProps } from 'react-native' -import { JSX, createElement } from 'react' +import { Text, TextProps, TextStyle } from 'react-native' +import { JSX, createElement, ReactNode } from 'react' import useInnerProps from './getInnerListeners' -import { extendObject } from './utils' +import { extendObject, useAddSpace } from './utils' -const SimpleText = (props: TextProps): JSX.Element => { +interface _TextProps extends TextProps { + style?: TextStyle + children?: ReactNode + 'enable-android-align-center'?: boolean + 'enable-add-space'?: boolean + 'space-font-size'?: number +} + +const SimpleText = (props: _TextProps): JSX.Element => { const { allowFontScaling = false, - children + 'enable-android-align-center': enableAndroidAlignCenter, + 'enable-add-space': enableAddSpace, + 'space-font-size': spaceFontSize } = props + const extendStyle = enableAndroidAlignCenter ? { includeFontPadding: false, textAlignVertical: 'center' } : null + const innerProps = useInnerProps( extendObject( {}, props, { - allowFontScaling + allowFontScaling, + style: extendStyle ? extendObject({}, props.style, extendStyle) : props.style } - ) + ), + ['enable-android-align-center', 'enable-add-space', 'space-font-size'] ) + const children = useAddSpace(props.children, { enableAddSpace, spaceFontSize }) + return createElement(Text, innerProps, children) } diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx index 9d771aea7b..422e0587aa 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx @@ -9,7 +9,7 @@ import { useRef, forwardRef, ReactNode, JSX, createElement, Children } from 'rea import Portal from './mpx-portal' import useInnerProps from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数 -import { useTransformStyle, wrapChildren, extendObject } from './utils' +import { useTransformStyle, wrapChildren, extendObject, useAddSpace } from './utils' const decodeMap = { '<': '<', @@ -41,13 +41,16 @@ interface _TextProps extends TextProps { style?: TextStyle children?: ReactNode selectable?: boolean + decode?: boolean 'user-select'?: boolean 'enable-var'?: boolean 'external-var-context'?: Record 'parent-font-size'?: number 'parent-width'?: number 'parent-height'?: number - decode?: boolean + 'enable-android-align-center'?: boolean + 'enable-add-space'?: boolean + 'space-font-size'?: number } const _Text = forwardRef, _TextProps>((props, ref): JSX.Element => { @@ -55,21 +58,26 @@ const _Text = forwardRef, _TextProps>((props, ref): style = {}, allowFontScaling = false, selectable, + decode, 'enable-var': enableVar, 'external-var-context': externalVarContext, + 'enable-android-align-center': enableAndroidAlignCenter, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, - decode + 'enable-add-space': enableAddSpace, + 'space-font-size': spaceFontSize } = props + const extendStyle = enableAndroidAlignCenter ? { includeFontPadding: false, textAlignVertical: 'center' } : null + const { normalStyle, hasVarDec, varContextRef, hasPositionFixed - } = useTransformStyle(style, { + } = useTransformStyle(extendStyle ? extendObject({}, style, extendStyle) : style, { enableVar, externalVarContext, parentFontSize, @@ -95,11 +103,16 @@ const _Text = forwardRef, _TextProps>((props, ref): ), [ 'user-select', - 'decode' + 'decode', + 'enable-android-align-center', + 'enable-add-space', + 'space-font-size' ] ) - const children = decode ? getDecodedChildren(props.children) : props.children + let children = decode ? getDecodedChildren(props.children) : props.children + + children = useAddSpace(children, { enableAddSpace, spaceFontSize }) let finalComponent:JSX.Element = createElement(Text, innerProps, wrapChildren( extendObject({}, props, { diff --git a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx index 0bba1b6c00..7b82cc1a65 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/utils.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/utils.tsx @@ -1,5 +1,5 @@ import { useEffect, useCallback, useMemo, useRef, ReactNode, ReactElement, isValidElement, useContext, useState, Dispatch, SetStateAction, Children, cloneElement, createElement, MutableRefObject } from 'react' -import { LayoutChangeEvent, TextStyle, ImageProps, Image } from 'react-native' +import { LayoutChangeEvent, TextStyle, ImageProps, Image, Text } from 'react-native' import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils' import { VarContext, ScrollViewContext, RouteContext } from './context' import { ExpressionParser, parseFunc, ReplaceSource } from './parser' @@ -832,3 +832,14 @@ export function useRunOnJSCallback (callbackMapRef: MutableRefObject