From 9e3b348c64ededbb969a96bbef0eb42711200f33 Mon Sep 17 00:00:00 2001 From: WX <42308734@qq.com> Date: Fri, 10 Mar 2023 14:36:26 +0800 Subject: [PATCH] =?UTF-8?q?fix(Tab):=20=E4=BF=AE=E5=A4=8D=E5=9C=A8android?= =?UTF-8?q?=E6=89=8B=E6=9C=BA=E4=B8=8A=E8=A2=AB=E9=81=AE=E6=8C=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/examples/src/routes/Tabs/index.tsx | 38 ++++++++++++++++++---- packages/core/src/Tabs/TabsItem.tsx | 23 +++++++------ packages/core/src/Tabs/index.tsx | 18 ++++++---- 3 files changed, 55 insertions(+), 24 deletions(-) diff --git a/example/examples/src/routes/Tabs/index.tsx b/example/examples/src/routes/Tabs/index.tsx index efcb65ddc..0a2c61044 100644 --- a/example/examples/src/routes/Tabs/index.tsx +++ b/example/examples/src/routes/Tabs/index.tsx @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {StyleSheet, View} from 'react-native'; +import {StyleSheet, View, Text} from 'react-native'; import Layout, {Container} from '../../Layout'; import {Tabs, IconsName} from '@uiw/react-native'; import {ComProps} from '../../routes'; @@ -43,12 +43,36 @@ export default class Index extends Component {
this.setState({flag: value})}> - - - - - - + + + 喜欢 + + + + + 关注 + + + + + 喜欢 + + + + + 爱好 + + + + + gitlabl + + + + + github + + diff --git a/packages/core/src/Tabs/TabsItem.tsx b/packages/core/src/Tabs/TabsItem.tsx index 193252022..c86ec8753 100644 --- a/packages/core/src/Tabs/TabsItem.tsx +++ b/packages/core/src/Tabs/TabsItem.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useImperativeHandle } from 'react'; import { View, StyleSheet, Text, TouchableOpacity, Animated } from 'react-native'; import Icon, { IconsName } from '../Icon'; @@ -38,10 +38,11 @@ export interface TabsItemProps { onChange?: (value: number) => void; index?: number; defaultColor?: string; + children?: React.ReactNode; } function TabsItem(props: TabsItemProps) { - const { activeColor, icon, index, value, onChange, defaultColor } = props; + const { activeColor, icon, index, value, onChange, defaultColor, children } = props; const opacity = useRef(new Animated.Value(0)).current; useEffect(() => { @@ -126,14 +127,16 @@ function TabsItem(props: TabsItemProps) { }, [value]); return ( - - (index === 0 || index) && onChange?.(index)}> - - {IconDom} - {props.title} - - {BorderDom} - + + + (index === 0 || index) && onChange?.(index)}> + + {IconDom} + {props.title} + + {BorderDom} + + ); } diff --git a/packages/core/src/Tabs/index.tsx b/packages/core/src/Tabs/index.tsx index 4aca651ec..ad44564fe 100644 --- a/packages/core/src/Tabs/index.tsx +++ b/packages/core/src/Tabs/index.tsx @@ -37,7 +37,7 @@ function Tabs(props: TabsProps) { } return ( - + {children && @@ -58,23 +58,27 @@ function Tabs(props: TabsProps) { })} + {children && + React.Children.toArray(children).map((child, index) => { + if (!React.isValidElement(child)) { + return; + } + if (value === index) { + return child.props?.children; + } + })} ); } const styles = StyleSheet.create({ - container: { - flex: 1, - marginTop: StatusBar.currentHeight || 0, - }, TabsContainer: { backgroundColor: '#fff', maxWidth: 1 * MainWidth, display: 'flex', justifyContent: 'space-between', alignItems: 'center', - paddingTop: 15, - paddingBottom: 20, + paddingVertical: 15, }, });