|
@@ -1,122 +0,0 @@
|
|
|
-import {
|
|
|
|
|
- TabList,
|
|
|
|
|
- TabListProps,
|
|
|
|
|
- Tabs,
|
|
|
|
|
- TabSlot,
|
|
|
|
|
- TabTrigger,
|
|
|
|
|
- TabTriggerSlotProps,
|
|
|
|
|
-} from 'expo-router/ui';
|
|
|
|
|
-import React from 'react';
|
|
|
|
|
-import { Pressable, StyleSheet, View } from 'react-native';
|
|
|
|
|
-
|
|
|
|
|
-import { ThemedText } from './themed-text';
|
|
|
|
|
-import { ThemedView } from './themed-view';
|
|
|
|
|
-
|
|
|
|
|
-import { MaxContentWidth, Spacing } from '@/constants/theme';
|
|
|
|
|
-import { Image, ImageSource } from 'expo-image';
|
|
|
|
|
-
|
|
|
|
|
-import antdDefaultTheme from '@ant-design/react-native/lib/style/themes/default';
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
-export default function AppTabs() {
|
|
|
|
|
- return (
|
|
|
|
|
- <Tabs>
|
|
|
|
|
- <TabSlot detachInactiveScreens style={{ height: '100%', paddingBottom: 44 }} />
|
|
|
|
|
- <TabList asChild>
|
|
|
|
|
- <CustomTabList>
|
|
|
|
|
- <TabTrigger name="home" href="/" asChild>
|
|
|
|
|
- <TabButton icon={require("@/assets/images/tabIcons/home.png")}>首页</TabButton>
|
|
|
|
|
- </TabTrigger>
|
|
|
|
|
- <TabTrigger name="customer" href="/customer" asChild>
|
|
|
|
|
- <TabButton icon={require("@/assets/images/tabIcons/explore.png")}>客户</TabButton>
|
|
|
|
|
- </TabTrigger>
|
|
|
|
|
- <TabTrigger name="analytics" href="/analytics" asChild>
|
|
|
|
|
- <TabButton icon={require("@/assets/images/tabIcons/explore.png")}>统计</TabButton>
|
|
|
|
|
- </TabTrigger>
|
|
|
|
|
- <TabTrigger name="reports" href="/reports" asChild>
|
|
|
|
|
- <TabButton icon={require("@/assets/images/tabIcons/explore.png")}>分析</TabButton>
|
|
|
|
|
- </TabTrigger>
|
|
|
|
|
- <TabTrigger name="profile" href="/profile" asChild>
|
|
|
|
|
- <TabButton icon={require("@/assets/images/tabIcons/home.png")}>我的</TabButton>
|
|
|
|
|
- </TabTrigger>
|
|
|
|
|
- </CustomTabList>
|
|
|
|
|
- </TabList>
|
|
|
|
|
- </Tabs>
|
|
|
|
|
- );
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-export function TabButton({ children, isFocused, icon, ...props }: TabTriggerSlotProps & {icon: ImageSource}) {
|
|
|
|
|
- return (
|
|
|
|
|
- <Pressable {...props} style={({ pressed }) => pressed && styles.pressed}>
|
|
|
|
|
- <ThemedView
|
|
|
|
|
- type={'backgroundElement'}
|
|
|
|
|
- style={styles.tabButtonView}>
|
|
|
|
|
- <Image tintColor={isFocused ? antdDefaultTheme.brand_primary : undefined} className="w-6 h-6 mb-1 self-center " source={icon} />
|
|
|
|
|
- <ThemedText type="small" style={{color: isFocused ? antdDefaultTheme.brand_primary : undefined}}>
|
|
|
|
|
- {children}
|
|
|
|
|
- </ThemedText>
|
|
|
|
|
- </ThemedView>
|
|
|
|
|
- </Pressable>
|
|
|
|
|
- );
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-export function CustomTabList(props: TabListProps) {
|
|
|
|
|
- // const scheme = "light"
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- return (
|
|
|
|
|
- <View {...props} style={styles.tabListContainer}>
|
|
|
|
|
- <ThemedView type="backgroundElement" style={styles.innerContainer}>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- {props.children}
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- </ThemedView>
|
|
|
|
|
- </View>
|
|
|
|
|
- );
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-const styles = StyleSheet.create({
|
|
|
|
|
- tabListContainer: {
|
|
|
|
|
- position: 'absolute',
|
|
|
|
|
- width: '100%',
|
|
|
|
|
- padding: Spacing.three,
|
|
|
|
|
- justifyContent: 'center',
|
|
|
|
|
- alignItems: 'center',
|
|
|
|
|
- flexDirection: 'row',
|
|
|
|
|
- bottom: 0,
|
|
|
|
|
- },
|
|
|
|
|
- innerContainer: {
|
|
|
|
|
- paddingVertical: Spacing.two,
|
|
|
|
|
- paddingHorizontal: Spacing.five,
|
|
|
|
|
- borderRadius: Spacing.five,
|
|
|
|
|
- flexDirection: 'row',
|
|
|
|
|
- alignItems: 'center',
|
|
|
|
|
- flexGrow: 1,
|
|
|
|
|
- gap: Spacing.two,
|
|
|
|
|
- maxWidth: MaxContentWidth,
|
|
|
|
|
- },
|
|
|
|
|
- brandText: {
|
|
|
|
|
- marginRight: 'auto',
|
|
|
|
|
- },
|
|
|
|
|
- pressed: {
|
|
|
|
|
- opacity: 0.7,
|
|
|
|
|
- },
|
|
|
|
|
- tabButtonView: {
|
|
|
|
|
- paddingVertical: Spacing.one,
|
|
|
|
|
- paddingHorizontal: Spacing.three,
|
|
|
|
|
- borderRadius: Spacing.half,
|
|
|
|
|
- display: 'flex',
|
|
|
|
|
- flexDirection: "column",
|
|
|
|
|
- justifyContent: "center",
|
|
|
|
|
- alignContent: "center",
|
|
|
|
|
- },
|
|
|
|
|
- externalPressable: {
|
|
|
|
|
- flexDirection: 'row',
|
|
|
|
|
- justifyContent: 'center',
|
|
|
|
|
- alignItems: 'center',
|
|
|
|
|
- gap: Spacing.one,
|
|
|
|
|
- marginLeft: Spacing.three,
|
|
|
|
|
- },
|
|
|
|
|
-});
|
|
|