fix(Tabs): 新增defaultColor api

Author: ChenlingasMx

packages/core/src/Tabs/README.md

@@ -45,6 +45,24 @@ function Demo() {
 export default Demo
 ```
 
+### 修改默认色
+
+```jsx
+import React, { useState } from 'react';
+import { Tabs, Icon } from '@uiw/react-native';
+function Demo() {
+  const [value,setValue]= useState(0)
+  return (
+     <Tabs onChange={(value)=>setValue(value)} value={value} defaultColor="red">
+      <Tabs.Item title="喜欢" icon='heart-on' />
+      <Tabs.Item title="关注" icon={<Icon name='star-on' color={value===1?'#035bb6':'red'} size={24} />} />
+      <Tabs.Item title="信息" icon='mail' />
+    </Tabs>
+  );
+}
+export default Demo
+```
+
 ### 选中色更改
 
 ```jsx
@@ -72,6 +90,7 @@ export default Demo
 | `value` | 值 | `number` | - |
 | `onChange` | 点击tab栏变化 | `(value: number) => void` | - |
 | `activeColor` | 选中后颜色 | `string` | `#035bb6` |
+| `defaultColor` | 组件默认眼色 | `string` | `#035bb6` |
 
 ### Tabs.Item Props
 

packages/core/src/Tabs/TabsItem.tsx

@@ -37,32 +37,32 @@ export interface TabsItemProps {
   value?: number;
   onChange?: (value: number) => void;
   index?: number;
+  defaultColor?: string;
 }
 
 function TabsItem(props: TabsItemProps) {
-  const { activeColor, icon, index, value, onChange } = props;
-  console.log('value', value, 'index', index);
+  const { activeColor, icon, index, value, onChange, defaultColor } = props;
   const style = useCallback(() => {
     const { style = {} } = props;
     const titleBoxStyle = {
       width: style.width ?? 100,
     };
     const titleStyle = {
       fontSize: style.titleSize ?? 20,
-      color: index === value && activeColor ? activeColor : '#035bb6',
+      color: index === value && activeColor ? activeColor : defaultColor,
       fontWeight: style.titleFontWeight ?? '600',
     };
     const iconBoxStyle = {
       width: style.width ?? 100,
     };
     const iconStyle = {
-      color: index === value && activeColor ? activeColor : '#035bb6',
+      color: index === value && activeColor ? activeColor : defaultColor,
       size: style.iconSize ?? 24,
     };
     const borderColor = {
       width: style.borderWidth ?? 40,
       borderBottomWidth: style.borderHeight ?? 4,
-      borderBottomColor: index === value && activeColor ? activeColor : '#035bb6',
+      borderBottomColor: index === value && activeColor ? activeColor : defaultColor,
       bottom: 0,
     };
     return {

packages/core/src/Tabs/index.tsx

@@ -12,11 +12,12 @@ export interface TabsProps extends ViewProps {
   style?: ViewStyle;
   value?: number;
   onChange?: (value: number) => void;
+  defaultColor?: string;
   activeColor?: string;
 }
 
 function Tabs(props: TabsProps) {
-  const { style, children, onChange, activeColor, value } = props;
+  const { style, children, onChange, activeColor, value, defaultColor = '#035bb6' } = props;
   if (!children) {
     return null;
   }
@@ -46,7 +47,13 @@ function Tabs(props: TabsProps) {
               }
               return React.cloneElement(child, {
                 ...child.props,
-                ...{ value: value, onChange: onChange, index: index, activeColor: activeColor },
+                ...{
+                  value: value,
+                  onChange: onChange,
+                  index: index,
+                  activeColor: activeColor,
+                  defaultColor: defaultColor,
+                },
               });
             })}
         </ScrollView>