uiwjs · ChenlingasMx · Feb 17, 2023 · Feb 17, 2023 · Feb 17, 2023
diff --git a/example/examples/src/routes/Empty/index.tsx b/example/examples/src/routes/Empty/index.tsx
@@ -31,35 +31,33 @@ const xml = `
 
 export interface DividerViewProps extends ComProps {}
 
-export default class DividerView extends React.Component<DividerViewProps> {
-  render() {
-    const {route} = this.props;
-    const description = route.params.description;
-    const title = route.params.title;
-    return (
-      <Container>
-        <Layout>
-          <Header title={title} description={description} />
-          <Body>
-            <Card title="默认基础实例">
-              <Empty />
-            </Card>
-            <Card title="自定义文字 label?: string">
-              <Empty label="冇得数据咯" />
-            </Card>
-            <Card title="替换默认图标 xml?: string;">
-              <Empty label="冇得数据咯" xml={xml} />
-            </Card>
-            <Card title="自定义图标尺寸 size?: number">
-              <Empty label="冇得数据咯" size={120} />
-            </Card>
-            <Card title="自定义文字样式 labelStyle?: TextProps['style']">
-              <Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
-            </Card>
-          </Body>
-          <Footer />
-        </Layout>
-      </Container>
-    );
-  }
+export default function DividerView(props: DividerViewProps) {
+  const {route} = props || {};
+  const description = route.params.description;
+  const title = route.params.title;
+  return (
+    <Container>
+      <Layout>
+        <Header title={title} description={description} />
+        <Body>
+          <Card title="默认基础实例">
+            <Empty />
+          </Card>
+          <Card title="自定义文字 label?: string">
+            <Empty label="冇得数据咯" />
+          </Card>
+          <Card title="替换默认图标 xml?: string;">
+            <Empty label="冇得数据咯" xml={xml} />
+          </Card>
+          <Card title="自定义图标尺寸 size?: number">
+            <Empty label="冇得数据咯" size={120} />
+          </Card>
+          <Card title="自定义文字样式 labelStyle?: TextProps['style']">
+            <Empty label="冇得数据咯" labelStyle={{color: 'red'}} />
+          </Card>
+        </Body>
+        <Footer />
+      </Layout>
+    </Container>
+  );
 }
diff --git a/packages/core/src/Empty/README.md b/packages/core/src/Empty/README.md
@@ -11,13 +11,14 @@ Empty 空状态
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty />
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -27,13 +28,14 @@ class Demo extends Component {
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯"/>
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -67,13 +69,14 @@ const xml = `
 </svg>
 `;
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯" xml={xml}/>
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -83,13 +86,14 @@ class Demo extends Component {
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯" size={120} />
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -99,13 +103,14 @@ class Demo extends Component {
 ```js
 import { Empty } from '@uiw/react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty label="冇得数据咯" labelStyle={{ color: 'red' }} />
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 
@@ -116,7 +121,7 @@ class Demo extends Component {
 import { Empty } from '@uiw/react-native';
 import {View, Text } from 'react-native';
 
-class Demo extends Component {
+const Demo = () => {
   render() {
     return (
       <Empty>
@@ -127,6 +132,7 @@ class Demo extends Component {
     )
   }
 }
+export default Demo
 ```
 <!--End-->
 

diff --git a/packages/core/src/TransitionImage/index.tsx b/packages/core/src/TransitionImage/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Animated,
   Image as ImageNative,
@@ -29,102 +29,100 @@ type ImageState = {
   placeholderOpacity: Animated.Value;
 };
 
-export default class TransitionImage extends React.Component<ImageProps & Partial<ImageProps>, ImageState> {
-  static displayName = 'Image';
-  static getSize = ImageNative.getSize;
-  static getSizeWithHeaders = ImageNative.getSizeWithHeaders;
-  static prefetch = ImageNative.prefetch;
-  static abortPrefetch = ImageNative.abortPrefetch;
-  static queryCache = ImageNative.queryCache;
-  static resolveAssetSource = ImageNative.resolveAssetSource;
-
-  state = {
+export default function TransitionImage(props: ImageProps & Partial<ImageProps>) {
+  const [state, _] = useState<ImageState>({
     placeholderOpacity: new Animated.Value(1),
-  };
+  });
 
-  onLoad = (e: any) => {
-    const { transition, onLoad, transitionDuration } = this.props;
+  const onLoad = (e: any) => {
+    const { transition, onLoad, transitionDuration } = props;
     if (!transition) {
-      this.state.placeholderOpacity.setValue(0);
+      state.placeholderOpacity.setValue(0);
       return;
     }
 
-    Animated.timing(this.state.placeholderOpacity, {
+    Animated.timing(state.placeholderOpacity, {
       toValue: 0,
       duration: transitionDuration,
       useNativeDriver: true,
     }).start();
     onLoad && onLoad(e);
   };
 
-  render() {
-    const {
-      onPress,
-      onLongPress,
-      Component = onPress || onLongPress ? TouchableOpacity : View,
-      placeholderStyle,
-      PlaceholderContent,
-      containerStyle,
-      childrenContainerStyle = null,
-      style = {},
-      ImageComponent = ImageNative,
-      children,
-      ...attributes
-    } = this.props;
+  const {
+    onPress,
+    onLongPress,
+    Component = onPress || onLongPress ? TouchableOpacity : View,
+    placeholderStyle,
+    PlaceholderContent,
+    containerStyle,
+    childrenContainerStyle = null,
+    style = {},
+    ImageComponent = ImageNative,
+    children,
+    ...attributes
+  } = props;
 
-    const hasImage = Boolean(attributes.source);
-    const { width, height, ...styleProps } = StyleSheet.flatten(style);
+  const hasImage = Boolean(attributes.source);
+  const { width, height, ...styleProps } = StyleSheet.flatten(style);
 
-    return (
-      <Component
-        onPress={onPress}
-        onLongPress={onLongPress}
-        accessibilityIgnoresInvertColors={true}
-        style={StyleSheet.flatten([styles.container, containerStyle])}
-      >
-        <ImageComponent
-          testID="RNE__Image"
-          transition={true}
-          transitionDuration={360}
-          {...attributes}
-          onLoad={this.onLoad}
-          style={StyleSheet.flatten([
-            StyleSheet.absoluteFill,
-            {
-              width: width,
-              height: height,
-            } as StyleProp<ImageStyle>,
-            styleProps,
-          ])}
-        />
+  return (
+    <Component
+      onPress={onPress}
+      onLongPress={onLongPress}
+      accessibilityIgnoresInvertColors={true}
+      style={StyleSheet.flatten([styles.container, containerStyle])}
+    >
+      <ImageComponent
+        testID="RNE__Image"
+        transition={true}
+        transitionDuration={360}
+        {...attributes}
+        onLoad={onLoad}
+        style={StyleSheet.flatten([
+          StyleSheet.absoluteFill,
+          {
+            width: width,
+            height: height,
+          } as StyleProp<ImageStyle>,
+          styleProps,
+        ])}
+      />
 
-        <Animated.View
-          pointerEvents={hasImage ? 'none' : 'auto'}
-          accessibilityElementsHidden={hasImage}
-          importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
-          style={[
-            styles.placeholderContainer,
-            {
-              opacity: hasImage ? this.state.placeholderOpacity : 1,
-            },
-          ]}
+      <Animated.View
+        pointerEvents={hasImage ? 'none' : 'auto'}
+        accessibilityElementsHidden={hasImage}
+        importantForAccessibility={hasImage ? 'no-hide-descendants' : 'yes'}
+        style={[
+          styles.placeholderContainer,
+          {
+            opacity: hasImage ? state.placeholderOpacity : 1,
+          },
+        ]}
+      >
+        <View
+          testID="RNE__Image__placeholder"
+          style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
         >
-          <View
-            testID="RNE__Image__placeholder"
-            style={StyleSheet.flatten([style, styles.placeholder, placeholderStyle])}
-          >
-            {PlaceholderContent}
-          </View>
-        </Animated.View>
-
-        <View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
-          {children}
+          {PlaceholderContent}
         </View>
-      </Component>
-    );
-  }
+      </Animated.View>
+
+      <View testID="RNE__Image__children__container" style={childrenContainerStyle ?? style}>
+        {children}
+      </View>
+    </Component>
+  );
 }
 
+TransitionImage.displayName = 'Image';
+TransitionImage.getSize = ImageNative.getSize;
+TransitionImage.getSizeWithHeaders = ImageNative.getSizeWithHeaders;
+TransitionImage.prefetch = ImageNative.prefetch;
+TransitionImage.abortPrefetch = ImageNative.abortPrefetch;
+TransitionImage.queryCache = ImageNative.queryCache;
+TransitionImage.resolveAssetSource = ImageNative.resolveAssetSource;
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',