fix(Radio):增加borderColor和checkedColor api & 更新文档

ChenlingasMx · ChenlingasMx · commit 293a1ab19e43 · 2021-12-23T15:23:36.000+08:00
diff --git a/example/examples/src/routes/Radio/index.tsx b/example/examples/src/routes/Radio/index.tsx
@@ -39,7 +39,9 @@ export default class RadioView extends React.Component<
           <Header title={title} description={description} />
           <Body>
             <Card title="基础实例">
-              <Radio>所有人可见</Radio>
+              <Radio checkedColor="#fd8a00" borderColor="#fd8a00">
+                所有人可见
+              </Radio>
               <Spacing />
               <Radio>超级管理员</Radio>
             </Card>
diff --git a/packages/core/src/Radio/README.md b/packages/core/src/Radio/README.md
@@ -84,4 +84,6 @@ function Demo() {
 | `circleSize` | Radio 大小 | Number | `20` |
 | `thumbSize` | Radio 选中部分大小 | Number | `12` |
 | `onPress` | 点击 Radio 的点击回调函数 | (event) => void | - |
-| `color`   | Radio 颜色 | string | `#008EF0` |
+| `color`   | Radio 禁用后颜色 | string | `#c3c5c7` |
+| `checkedColor`   | Radio 颜色 | string | `#008EF0` |
+| `borderColor`   | Radio 边框颜色 | string | `#bdc1cc` |
diff --git a/packages/core/src/Radio/index.tsx b/packages/core/src/Radio/index.tsx
@@ -48,6 +48,8 @@ export interface RadioProps extends ViewProps {
   disabled?: boolean;
   circleSize?: number;
   color?: string;
+  checkedColor?: string;
+  borderColor?: string;
   thumbSize?: number;
   onPress?: (event: GestureResponderEvent) => void;
 }
@@ -62,6 +64,8 @@ export default class Radio extends Component<RadioProps, RadioState> {
   static defaultProps: RadioProps = {
     checked: false,
     circleSize: 20,
+    checkedColor: '#008EF0',
+    borderColor: '#bdc1cc',
     color: '#c3c5c7',
     thumbSize: 12,
   };
@@ -110,14 +114,23 @@ export default class Radio extends Component<RadioProps, RadioState> {
     });
   };
   render() {
-    const { style, color, circleSize, thumbSize, disabled, ...otherProps } = this.props;
+    const {
+      style,
+      color,
+      circleSize,
+      thumbSize,
+      disabled,
+      checkedColor,
+      borderColor: bdColor,
+      ...otherProps
+    } = this.props;
     const sizeValue = this.state.sizeValue.interpolate({
       inputRange: [0, thumbSize!],
       outputRange: [0, thumbSize!],
       // extrapolate: 'clamp',
     });
-    const backgroundColor = disabled ? color : '#008EF0';
-    const borderColor = disabled ? color : '#bdc1cc';
+    const backgroundColor = disabled ? color : checkedColor;
+    const borderColor = disabled ? color : bdColor;
     return (
       <View style={[styles.defalut, style]} {...otherProps}>
         <TouchableOpacity disabled={disabled} style={[styles.touch]} onPress={this.handlePress}>
