Merge pull request #736 from thundersdata-frontend/pref-improvment

Perf: 对Box和Text两个基础组件进行性能优化

.changeset/dirty-dragons-vanish.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': minor
+---
+
+对Box和Text两个基础组件进行性能优化

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. 背景为蓝色的正方形

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<Theme>();
+const Box = createBox<Theme>(NativeView);
 Box.displayName = 'Box';
 Box.defaultProps = {
   pointerEvents: 'box-none',

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

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<Theme> & RNTextProps;
+type Props = TextProps<Theme> & Omit<RNTextProps, 'onLongPress' | 'onPress' | 'onPressIn' | 'onPressOut'>;
 
-const BaseText = createText<Theme>();
+const NativeText = ({ onLongPress, onPress, onPressIn, onPressOut, ...props }: RNTextProps) =>
+  createElement('RCTText', props);
+
+const BaseText = createText<Theme>(NativeText);
 
 const Text = memo(({ children, style, ...props }: PropsWithChildren<Props>) => {
   return (