feat(rn): 更新 ReactNative 支持的 PropTypes (#16405)

Co-authored-by: ZEJIA LIU <[email protected]>
NervJS · Aug 26, 2024 · 7b7477f · 7b7477f
1 parent 7795c9d
commit 7b7477f
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 48 deletions.
diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ImageStylePropTypes.ts
@@ -27,7 +27,9 @@ const ImageStylePropTypes = {
   borderColor: ColorPropType,
   borderWidth: ReactPropTypes.number,
   borderRadius: ReactPropTypes.number,
+  cursor: ReactPropTypes.oneOf(['auto', 'pointer']),
   overflow: ReactPropTypes.oneOf(['visible', 'hidden']),
+  objectFit: ReactPropTypes.oneOf(['cover', 'contain', 'fill', 'scale-down']),
 
   /**
    * Changes the color of all the non-transparent pixels to the tintColor.

diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/LayoutPropTypes.ts
@@ -395,7 +395,7 @@ const LayoutPropTypes = {
    *  for more details on how `position` differs between React Native
    *  and CSS.
    */
-  position: ReactPropTypes.oneOf(['absolute', 'relative']),
+  position: ReactPropTypes.oneOf(['absolute', 'relative', 'static']),
 
   /** `flexDirection` controls which directions children of a container go.
    *  `row` goes left to right, `column` goes top to bottom, and you may
@@ -476,7 +476,8 @@ const LayoutPropTypes = {
     'center',
     'stretch',
     'space-between',
-    'space-around'
+    'space-around',
+    'space-evenly'
   ]),
 
   /** `overflow` controls how children are measured and displayed.
@@ -553,7 +554,29 @@ const LayoutPropTypes = {
    *  for more details.
    *  @platform ios
    */
-  direction: ReactPropTypes.oneOf(['inherit', 'ltr', 'rtl'])
+  direction: ReactPropTypes.oneOf(['inherit', 'ltr', 'rtl']),
+
+  /**
+   * In React Native, gap works the same way it does in CSS.
+   * If there are two or more children in a container, they will be separated from each other
+   * by the value of the gap - but the children will not be separated from the edges of their parent container.
+   * For horizontal gaps, use columnGap, for vertical gaps, use rowGap, and to apply both at the same time, it's gap.
+   * When align-content or justify-content are set to space-between or space-around, the separation
+   * between children may be larger than the gap value.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
+   */
+  rowGap: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string
+  ]),
+  columnGap: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string
+  ]),
+  gap: ReactPropTypes.oneOfType([
+    ReactPropTypes.number,
+    ReactPropTypes.string
+  ]),
 }
 
 export default LayoutPropTypes
diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TextStylePropTypes.ts
@@ -38,87 +38,79 @@ const TextStylePropTypes = {
     '600',
     '700',
     '800',
-    '900'
+    '900',
+    'ultralight',
+    'thin',
+    'light',
+    'medium',
+    'regular',
+    'semibold',
+    'condensedBold',
+    'condensed',
+    'heavy',
+    'black'
   ]),
-  /**
-   * @platform ios
-   */
-  fontVariant: ReactPropTypes.arrayOf(
-    ReactPropTypes.oneOf([
-      'small-caps',
-      'oldstyle-nums',
-      'lining-nums',
-      'tabular-nums',
-      'proportional-nums'
-    ])
-  ),
   textShadowOffset: ReactPropTypes.shape({
     width: ReactPropTypes.number,
     height: ReactPropTypes.number
   }),
   textShadowRadius: ReactPropTypes.number,
   textShadowColor: ColorPropType,
-  /**
-   * @platform ios
-   */
   letterSpacing: ReactPropTypes.number,
   lineHeight: ReactPropTypes.number,
   /**
    * Specifies text alignment. The value 'justify' is only supported on iOS and
    * fallbacks to `left` on Android.
    */
   textAlign: ReactPropTypes.oneOf([
-    'auto' /* default */,
+    'auto',
     'left',
     'right',
     'center',
     'justify'
   ]),
-  /**
-   * @platform android
-   */
-  textAlignVertical: ReactPropTypes.oneOf([
-    'auto' /* default */,
-    'top',
-    'bottom',
-    'center'
-  ]),
-  /**
-   * Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
-   * With some fonts, this padding can make text look slightly misaligned when centered vertically.
-   * For best results also set `textAlignVertical` to `center`. Default is true.
-   * @platform android
-   */
-  includeFontPadding: ReactPropTypes.bool,
   textDecorationLine: ReactPropTypes.oneOf([
-    'none' /* default */,
+    'none',
     'underline',
     'line-through',
     'underline line-through'
   ]),
+  textTransform: ReactPropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
+  userSelect: ReactPropTypes.oneOf(['auto', 'none', 'text', 'contain', 'all']),
+
   /**
    * @platform ios
    */
+  fontVariant: ReactPropTypes.arrayOf(
+    ReactPropTypes.oneOf([
+      'small-caps',
+      'oldstyle-nums',
+      'lining-nums',
+      'tabular-nums',
+      'proportional-nums'
+    ])
+  ),
+  textDecorationColor: ColorPropType,
   textDecorationStyle: ReactPropTypes.oneOf([
     'solid' /* default */,
     'double',
     'dotted',
     'dashed'
   ]),
+  writingDirection: ReactPropTypes.oneOf(['auto' /* default */, 'ltr', 'rtl']),
+
   /**
-   * @platform ios
+   * @platform android
    */
-  textDecorationColor: ColorPropType,
-  textTransform: ReactPropTypes.oneOf([
-    'none' /* default */,
-    'capitalize',
-    'uppercase',
-    'lowercase'
-  ]),
+  textAlignVertical: ReactPropTypes.oneOf(['auto', 'top', 'bottom', 'center']),
+  verticalAlign: ReactPropTypes.oneOf(['auto', 'top', 'bottom', 'middle']),
   /**
-   * @platform ios
+   * Set to `false` to remove extra font padding intended to make space for certain ascenders / descenders.
+   * With some fonts, this padding can make text look slightly misaligned when centered vertically.
+   * For best results also set `textAlignVertical` to `center`. Default is true.
+   * @platform android
    */
-  writingDirection: ReactPropTypes.oneOf(['auto' /* default */, 'ltr', 'rtl'])
+  includeFontPadding: ReactPropTypes.bool,
 }
 
 export default TextStylePropTypes
diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/TransformPropTypes.ts
@@ -73,6 +73,15 @@ const TransformPropTypes = {
       ReactPropTypes.shape({ skewY: ReactPropTypes.string })
     ])
   ),
+  transformOrigin: ReactPropTypes.oneOfType([
+    ReactPropTypes.arrayOf(
+      ReactPropTypes.oneOfType([
+        ReactPropTypes.number,
+        ReactPropTypes.string
+      ])
+    ),
+    ReactPropTypes.string
+  ]),
 
   /**
    * Deprecated. Use the transform prop instead.

diff --git a/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts b/packages/taro-rn-style-transformer/src/transforms/StyleSheet/ViewStylePropTypes.ts
@@ -27,6 +27,9 @@ const ViewStylePropTypes = {
   backfaceVisibility: ReactPropTypes.oneOf(['visible', 'hidden']),
   backgroundColor: ColorPropType,
   borderColor: ColorPropType,
+  borderBlockColor: ColorPropType,
+  borderBlockStartColor: ColorPropType,
+  borderBlockEndColor: ColorPropType,
   borderTopColor: ColorPropType,
   borderRightColor: ColorPropType,
   borderBottomColor: ColorPropType,
@@ -42,21 +45,34 @@ const ViewStylePropTypes = {
   borderBottomRightRadius: ReactPropTypes.number,
   borderBottomStartRadius: ReactPropTypes.number,
   borderBottomEndRadius: ReactPropTypes.number,
+  borderStartStartRadius: ReactPropTypes.number,
+  borderStartEndRadius: ReactPropTypes.number,
+  borderEndStartRadius: ReactPropTypes.number,
+  borderEndEndRadius: ReactPropTypes.number,
   borderStyle: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']),
   borderWidth: ReactPropTypes.number,
   borderTopWidth: ReactPropTypes.number,
   borderRightWidth: ReactPropTypes.number,
   borderBottomWidth: ReactPropTypes.number,
   borderLeftWidth: ReactPropTypes.number,
   opacity: ReactPropTypes.number,
+  pointerEvents: ReactPropTypes.oneOf(['box-none', 'none', 'box-only', 'auto']),
+  cursor: ReactPropTypes.oneOf(['auto', 'pointer']),
+
   /**
    * (Android-only) Sets the elevation of a view, using Android's underlying
    * [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
    * This adds a drop shadow to the item and affects z-order for overlapping views.
    * Only supported on Android 5.0+, has no effect on earlier versions.
    * @platform android
    */
-  elevation: ReactPropTypes.number
+  elevation: ReactPropTypes.number,
+
+  /**
+   * On iOS 13+, it is possible to change the corner curve of borders.
+   * @platform ios
+   */
+  borderCurve: ReactPropTypes.oneOf(['circular', 'continuous'])
 }
 
 export default ViewStylePropTypes