fix(Flex): 重构为function组件

Author: ChenlingasMx

packages/core/src/Flex/FlexItem.tsx

@@ -1,10 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { View, ViewProps } from 'react-native';
 
 export interface FlexItemProps extends ViewProps {}
 
-export default class FlexItem extends Component<FlexItemProps> {
-  render() {
-    return <View {...this.props} />;
-  }
+export default function FlexItem(props: FlexItemProps) {
+  return <View {...props} />;
 }

packages/core/src/Flex/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { View, ViewProps, FlexStyle } from 'react-native';
 import FlexItem from './FlexItem';
 
@@ -26,50 +26,51 @@ export interface FlexProps extends ViewProps {
   wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
 }
 
-export default class Flex extends Component<FlexProps> {
-  static Item = FlexItem;
-  static defaultProps: FlexProps = {
-    direction: 'row',
-    justify: 'start',
-    wrap: 'nowrap',
-    align: 'start',
-  };
-  render() {
-    const { direction, justify, align, wrap, children, style } = this.props;
-    const sty: FlexProps['style'] = {};
-    if (direction) {
-      sty.flexDirection = direction;
-    }
-    if (wrap) {
-      sty.flexWrap = wrap;
-    }
-    if (justify) {
-      sty.justifyContent = justify
-        .replace(/^start$/g, 'flex-start')
-        .replace(/^end$/g, 'flex-end')
-        .replace(/^between$/g, 'space-between')
-        .replace(/^around$/g, 'space-around')
-        .replace(/^evenly$/g, 'space-evenly') as FlexStyle['justifyContent'];
-    }
-    if (align) {
-      sty.alignItems = align.replace(/^start$/g, 'flex-start').replace(/^end$/g, 'flex-end') as FlexStyle['alignItems'];
-    }
-    return (
-      <View testID="RNE__Flex__wrap" style={[sty, style]}>
-        {children &&
-          React.Children.map(children, (child: React.ReactNode) => {
-            if (!React.isValidElement(child)) {
-              return null;
-            }
-            if (child.type && (child.type as any).displayName === 'FlexItem') {
-              return React.cloneElement(<FlexItem />, {
-                ...child.props,
-                style: [{ flex: 1 }, child.props.style],
-              });
-            }
-            return child;
-          })}
-      </View>
-    );
+function Flex(props: FlexProps) {
+  const { direction, justify, align, wrap, children, style } = props;
+  const sty: FlexProps['style'] = {};
+  if (direction) {
+    sty.flexDirection = direction;
   }
+  if (wrap) {
+    sty.flexWrap = wrap;
+  }
+  if (justify) {
+    sty.justifyContent = justify
+      .replace(/^start$/g, 'flex-start')
+      .replace(/^end$/g, 'flex-end')
+      .replace(/^between$/g, 'space-between')
+      .replace(/^around$/g, 'space-around')
+      .replace(/^evenly$/g, 'space-evenly') as FlexStyle['justifyContent'];
+  }
+  if (align) {
+    sty.alignItems = align.replace(/^start$/g, 'flex-start').replace(/^end$/g, 'flex-end') as FlexStyle['alignItems'];
+  }
+  return (
+    <View testID="RNE__Flex__wrap" style={[sty, style]}>
+      {children &&
+        React.Children.map(children, (child: React.ReactNode) => {
+          if (!React.isValidElement(child)) {
+            return null;
+          }
+          if (child.type && (child.type as any).displayName === 'FlexItem') {
+            return React.cloneElement(<FlexItem />, {
+              ...child.props,
+              style: [{ flex: 1 }, child.props.style],
+            });
+          }
+          return child;
+        })}
+    </View>
+  );
 }
+Flex.defaultProps = {
+  direction: 'row',
+  justify: 'start',
+  wrap: 'nowrap',
+  align: 'start',
+} as FlexProps;
+
+Flex.Item = FlexItem;
+
+export default Flex;