From a375d01230c01c7f953b2d8d3a7772d1f264fa0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Sat, 7 Oct 2023 11:32:56 +0800 Subject: [PATCH 1/2] chore: bump dependencies --- pnpm-lock.yaml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1a81d6801..326ec63175 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -324,7 +324,7 @@ importers: packages/react-native-calendar: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/react-native-picker': workspace:^2.3.2 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 @@ -369,7 +369,7 @@ importers: packages/react-native-image-picker: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': 0.72.2 @@ -389,7 +389,7 @@ importers: packages/react-native-password: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -407,7 +407,7 @@ importers: packages/react-native-picker: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/lodash-es': ^4.17.8 '@types/react': ^18.2.15 @@ -436,7 +436,7 @@ importers: packages/react-native-rating: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -462,7 +462,7 @@ importers: packages/react-native-share: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 react-native-builder-bob: ^0.21.3 @@ -480,7 +480,7 @@ importers: packages/react-native-skeleton: specifiers: '@shopify/restyle': 2.4.2 - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 @@ -501,7 +501,7 @@ importers: packages/react-native-tabs: specifiers: - '@td-design/react-native': workspace:^5.1.1 + '@td-design/react-native': workspace:^5.2.0 '@td-design/rn-hooks': workspace:^2.7.2 '@types/react': ^18.2.15 '@types/react-native': ^0.72.2 From d29c3c4fdd6ede126a1e95a266d25b41d0e784b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Sat, 7 Oct 2023 11:39:00 +0800 Subject: [PATCH 2/2] =?UTF-8?q?perf:=20=E5=AF=B9Box=E5=92=8CText=E4=B8=A4?= =?UTF-8?q?=E4=B8=AA=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=E8=BF=9B=E8=A1=8C?= =?UTF-8?q?=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/dirty-dragons-vanish.md | 5 +++++ packages/react-native/src/box/index.md | 2 ++ packages/react-native/src/box/index.tsx | 5 ++++- packages/react-native/src/text/index.md | 2 ++ packages/react-native/src/text/index.tsx | 9 ++++++--- 5 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 .changeset/dirty-dragons-vanish.md diff --git a/.changeset/dirty-dragons-vanish.md b/.changeset/dirty-dragons-vanish.md new file mode 100644 index 0000000000..1f9f51a39e --- /dev/null +++ b/.changeset/dirty-dragons-vanish.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native': minor +--- + +对Box和Text两个基础组件进行性能优化 diff --git a/packages/react-native/src/box/index.md b/packages/react-native/src/box/index.md index a51142c581..5aa4250ad0 100644 --- a/packages/react-native/src/box/index.md +++ b/packages/react-native/src/box/index.md @@ -13,6 +13,8 @@ group: 基于`restyle`，除样式属性外继承`ViewProps`。 +**注意，Box组件不直接基于`View`组件，而是基于`react-native/Libraries/Components/View/ViewNativeComponent`（[why](https://twitter.com/natebirdman/status/1695511232298783079?s=42)）。** + ## 效果演示 ### 1. 背景为蓝色的正方形 diff --git a/packages/react-native/src/box/index.tsx b/packages/react-native/src/box/index.tsx index 3fbc429f45..9aa0420456 100644 --- a/packages/react-native/src/box/index.tsx +++ b/packages/react-native/src/box/index.tsx @@ -1,8 +1,11 @@ +// @ts-ignore +import NativeView from 'react-native/Libraries/Components/View/ViewNativeComponent'; + import { createBox } from '@shopify/restyle'; import { Theme } from '../theme'; -const Box = createBox(); +const Box = createBox(NativeView); Box.displayName = 'Box'; Box.defaultProps = { pointerEvents: 'box-none', diff --git a/packages/react-native/src/text/index.md b/packages/react-native/src/text/index.md index acea2197b5..de3a23ab18 100644 --- a/packages/react-native/src/text/index.md +++ b/packages/react-native/src/text/index.md @@ -12,6 +12,8 @@ group: 文本组件主要基于`restyle`封装，替换`react-native`默认的`Text`组件。 +**注意：Text组件移除了`onLongPress`/`onPress`/`onPressIn`/`onPressOut`这些属性（[Why](https://twitter.com/fernandotherojo/status/1707762822015267219?s=42)）。所以您无法直接在Text组件上使用点击事件，需要的话，请使用`Pressable`或者`Touchable*`等组件包裹Text组件以实现相同的效果。** + ## 效果演示 ### 1. 字体大小 32 diff --git a/packages/react-native/src/text/index.tsx b/packages/react-native/src/text/index.tsx index 0eaeb5971c..e86c11a5c2 100644 --- a/packages/react-native/src/text/index.tsx +++ b/packages/react-native/src/text/index.tsx @@ -1,13 +1,16 @@ -import React, { memo, PropsWithChildren } from 'react'; +import React, { createElement, memo, PropsWithChildren } from 'react'; import { TextProps as RNTextProps } from 'react-native'; import { createText, TextProps } from '@shopify/restyle'; import { Theme } from '../theme'; -type Props = TextProps & RNTextProps; +type Props = TextProps & Omit; -const BaseText = createText(); +const NativeText = ({ onLongPress, onPress, onPressIn, onPressOut, ...props }: RNTextProps) => + createElement('RCTText', props); + +const BaseText = createText(NativeText); const Text = memo(({ children, style, ...props }: PropsWithChildren) => { return (