chore(SegmentedControl): SegmentedControl 设置color属性，文字颜色 (#256)

Author: cuilanxin

example/examples/src/routes/SegmentedControl/index.tsx

@@ -37,6 +37,17 @@ export default class SegmentedControlView extends React.Component<SegmentedContr
                 value={['申请', '审批', '提交']}
               />
             </Card>
+            <Card
+              title={
+                '设置自定义文本颜色 textColor?: [选中: string, 未选中: string]'
+              }>
+              <SegmentedControl
+                textColor={['#333', '#ccc']}
+                color="#999"
+                selectedIndex={2}
+                value={['申请', '审批', '提交']}
+              />
+            </Card>
             <Card title={'设置间距 gutter?: number'}>
               <SegmentedControl
                 gutter={10}

packages/core/src/SegmentedControl/README.md

@@ -71,6 +71,7 @@ function Demo() {
 | `style` | 自定义样式 | Object | {} |
 | `value` | 初始值 | String[] | [] |
 | `color` | 组件主色调 | String | `#108ee9` |
+| `textColor` | 文本颜色 | [选中颜色: string, 未选中颜色: string] | `[#fff, color]` |
 | `size` | 按钮尺寸 | `small`, `default`, `large` | `default` |
 | `disabled` | 是否启用 | Boolean | `false` |
 | `selectedIndex` | 选中项在数组中的索引 | Number | 0 |

packages/core/src/SegmentedControl/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import { ViewStyle, TextStyle, Text } from 'react-native';
 import ButtonGroup, { ButtonGroupProps } from '../ButtonGroup';
 import Button from '../Button';
 
@@ -8,6 +8,7 @@ export interface SegmentedControlProps<T> extends ButtonGroupProps {
   selectedIndex?: number;
   renderItem?: (label: string | T, selectedIndex: number, props: ButtonGroupProps) => JSX.Element;
   onValueChange?: (label: string | T, selectedIndex: number) => void;
+  textColor?: [string, string];
 }
 
 export interface SegmentedControlState {
@@ -35,16 +36,24 @@ export default class SegmentedControl<T> extends Component<SegmentedControlProps
   };
   render() {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, selectedIndex, renderItem, ...otherProps } = this.props;
+    const {
+      value,
+      selectedIndex,
+      renderItem,
+      textColor = ['#fff', this.props.color ?? '#108ee9'],
+      ...otherProps
+    } = this.props;
     return (
       <ButtonGroup {...otherProps}>
         {value &&
           (value as (string | T)[]).map((label: string | T, key: number) => {
             const styl: ViewStyle = {};
             const textStyle: TextStyle = {};
+            let textStyleColor: string = textColor[0];
             if (this.state.selectedIndex !== key + 1) {
               styl.backgroundColor = '#fff';
               textStyle.color = otherProps.color;
+              textStyleColor = textColor[1];
             }
             const props: ButtonGroupProps = {
               type: 'primary',
@@ -55,7 +64,11 @@ export default class SegmentedControl<T> extends Component<SegmentedControlProps
             if (renderItem) {
               return renderItem(label, key + 1, props);
             }
-            return React.cloneElement(<Button key={key} />, { ...props }, label);
+            return React.cloneElement(
+              <Button key={key} />,
+              { ...props },
+              <Text style={{ color: textStyleColor }}>{label}</Text>,
+            );
           })}
       </ButtonGroup>
     );