diff --git a/packages/core/src/Button/README.md b/packages/core/src/Button/README.md
index 7db05465a..7a8f3c07e 100644
--- a/packages/core/src/Button/README.md
+++ b/packages/core/src/Button/README.md
@@ -23,7 +23,7 @@ class Demo extends Component {
         <Spacing/>
         <Button disabled>disabled</Button>
         <Spacing/>
-        <Button type="primary">primary</Button>
+        <Button type="primary" onPress={()=>console.log("The Button")}>primary</Button>
         <Spacing/>
         <Button type="warning">warning</Button>
         <Spacing/>
@@ -181,7 +181,7 @@ export default Demo
 
 ```
 
-### 自定义图标 
+### 自定义图标
 
 ```jsx mdx:preview
 
diff --git a/packages/core/src/Button/index.tsx b/packages/core/src/Button/index.tsx
index 25f26de4a..94061764d 100644
--- a/packages/core/src/Button/index.tsx
+++ b/packages/core/src/Button/index.tsx
@@ -35,121 +35,120 @@ export interface ButtonProps extends TouchableOpacityProps {
   bordered?: boolean;
 }
 
-export default class ButtonView<T> extends React.Component<ButtonProps> {
-  static defaultProps: ButtonProps = {
-    activeOpacity: 0.5,
-    rounded: 5,
-    bordered: true,
-    size: 'default',
-  };
-  render() {
-    const {
-      children,
-      style,
-      textStyle: childStyle,
-      rounded,
-      bordered,
-      color: buttonColor,
-      type,
-      size,
-      disabled,
-      loading,
-      ...restProps
-    } = this.props;
-    let backgroundColor, textColor, borderColor, borderWidth, borderRadius;
+export default function ButtonView<T>(props: ButtonProps) {
+  const {
+    children,
+    style,
+    textStyle: childStyle,
+    rounded,
+    bordered,
+    color: buttonColor,
+    type,
+    size,
+    disabled,
+    loading,
+    ...restProps
+  } = props;
+  let backgroundColor, textColor, borderColor, borderWidth, borderRadius;
 
-    switch (type) {
-      case 'warning':
-        backgroundColor = colors.yellow;
-        break;
-      case 'primary':
-        backgroundColor = colors.blue;
-        break;
-      case 'success':
-        backgroundColor = colors.green;
-        break;
-      case 'danger':
-        backgroundColor = colors.red;
-        break;
-      case 'light':
-        backgroundColor = colors.white;
-        break;
-      case 'dark':
-        backgroundColor = colors.black;
-        break;
-      default:
-        break;
-    }
-    if (backgroundColor) {
-      backgroundColor = color(backgroundColor).rgb().string();
-    }
-    if (type) {
-      textColor = color(backgroundColor).isLight()
-        ? color(colors.black).rgb().string()
-        : color(colors.white).rgb().string();
-    }
-    if (!type) {
-      borderColor = color(colors.black).alpha(0.32).rgb().string();
-      borderWidth = 1;
-    }
-    if (disabled) {
-      textColor = color(textColor).alpha(0.3).rgb().string();
-    }
-    if (buttonColor) {
-      backgroundColor = color(buttonColor).rgb().string();
-      textColor = color(buttonColor).isLight()
-        ? color(buttonColor).darken(0.9).string()
-        : color(buttonColor).lighten(0.9).string();
-    }
-    if (rounded && (typeof rounded === 'number' || typeof rounded === 'boolean')) {
-      borderRadius = rounded;
-    }
-    if (backgroundColor) {
-      borderColor = color(backgroundColor).darken(0.2).string();
-      borderWidth = 1;
-    }
-    if (!bordered) {
-      borderWidth = 0;
-    }
-    const buttonStyle = {
-      backgroundColor,
-      borderColor,
-      borderWidth,
-      borderRadius,
-    };
-    const textStyle = { color: textColor };
-    let sizeStyle = {};
-    if (size && styles[size]) {
-      sizeStyle = styles[size];
-    }
-    let boxStyle = {};
-    const styleKey = `${size}Box` as keyof typeof styles;
-    if (size && styles[styleKey]) {
-      boxStyle = styles[styleKey];
-    }
-    if (!children) {
-      return null;
-    }
-    return (
-      <TouchableOpacity
-        testID="RNE__Button__wrap"
-        style={[styles.button, styles.content, buttonStyle, boxStyle, style]}
-        disabled={disabled}
-        {...restProps}
-      >
-        {loading && <ActivityIndicator size={16} color={textColor} style={styles.icon} />}
-        {React.Children.toArray(children).map((child: any, idx) => {
-          return (
-            <Div testID="RNE__Button__div" key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
-              {child}
-            </Div>
-          );
-        })}
-      </TouchableOpacity>
-    );
+  switch (type) {
+    case 'warning':
+      backgroundColor = colors.yellow;
+      break;
+    case 'primary':
+      backgroundColor = colors.blue;
+      break;
+    case 'success':
+      backgroundColor = colors.green;
+      break;
+    case 'danger':
+      backgroundColor = colors.red;
+      break;
+    case 'light':
+      backgroundColor = colors.white;
+      break;
+    case 'dark':
+      backgroundColor = colors.black;
+      break;
+    default:
+      break;
+  }
+  if (backgroundColor) {
+    backgroundColor = color(backgroundColor).rgb().string();
+  }
+  if (type) {
+    textColor = color(backgroundColor).isLight()
+      ? color(colors.black).rgb().string()
+      : color(colors.white).rgb().string();
+  }
+  if (!type) {
+    borderColor = color(colors.black).alpha(0.32).rgb().string();
+    borderWidth = 1;
+  }
+  if (disabled) {
+    textColor = color(textColor).alpha(0.3).rgb().string();
+  }
+  if (buttonColor) {
+    backgroundColor = color(buttonColor).rgb().string();
+    textColor = color(buttonColor).isLight()
+      ? color(buttonColor).darken(0.9).string()
+      : color(buttonColor).lighten(0.9).string();
+  }
+  if (rounded && (typeof rounded === 'number' || typeof rounded === 'boolean')) {
+    borderRadius = rounded;
   }
+  if (backgroundColor) {
+    borderColor = color(backgroundColor).darken(0.2).string();
+    borderWidth = 1;
+  }
+  if (!bordered) {
+    borderWidth = 0;
+  }
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius,
+  };
+  const textStyle = { color: textColor };
+  let sizeStyle = {};
+  if (size && styles[size]) {
+    sizeStyle = styles[size];
+  }
+  let boxStyle = {};
+  const styleKey = `${size}Box` as keyof typeof styles;
+  if (size && styles[styleKey]) {
+    boxStyle = styles[styleKey];
+  }
+  if (!children) {
+    return null;
+  }
+  return (
+    <TouchableOpacity
+      testID="RNE__Button__wrap"
+      style={[styles.button, styles.content, buttonStyle, boxStyle, style]}
+      disabled={disabled}
+      {...restProps}
+    >
+      {loading && <ActivityIndicator size={16} color={textColor} style={styles.icon} />}
+      {React.Children.toArray(children).map((child: any, idx) => {
+        return (
+          <Div testID="RNE__Button__div" key={idx} style={[sizeStyle, styles.label, textStyle, childStyle]}>
+            {child}
+          </Div>
+        );
+      })}
+    </TouchableOpacity>
+  );
 }
 
+ButtonView.defaultProps = {
+  activeOpacity: 0.5,
+  rounded: 5,
+  bordered: true,
+  size: 'default',
+} as ButtonProps;
+
 const styles = StyleSheet.create({
   button: {
     borderStyle: 'solid',