138 lines
4.2 KiB
TypeScript
138 lines
4.2 KiB
TypeScript
import { Tabs } from 'expo-router'
|
|
import React from 'react'
|
|
import { StyleSheet, View, Text } from 'react-native'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { HomeIcon, MessageIcon, MyIcon, VideoIcon } from '@/components/icon'
|
|
|
|
export default function TabLayout() {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: '#FFFFFF',
|
|
tabBarInactiveTintColor: '#FFFFFF',
|
|
headerShown: false,
|
|
tabBarHideOnKeyboard: true,
|
|
tabBarShowLabel: true,
|
|
tabBarStyle: {
|
|
backgroundColor: '#1C1E22CC',
|
|
height: 83,
|
|
paddingTop: 4,
|
|
paddingBottom: 4,
|
|
paddingLeft: 4,
|
|
paddingRight: 4,
|
|
borderTopWidth: 0,
|
|
},
|
|
tabBarLabelStyle: {
|
|
color: '#FFFFFF',
|
|
fontSize: 10,
|
|
fontWeight: '400',
|
|
},
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: t('tabs.home'),
|
|
tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.home')}</Text>),
|
|
tabBarIcon: ({ focused }: { focused: boolean }) => {
|
|
if (focused) {
|
|
return (
|
|
<LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
|
|
<HomeIcon />
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
return (
|
|
<View style={{ opacity: 0.6 }}>
|
|
<HomeIcon />
|
|
</View>
|
|
)
|
|
},
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="video"
|
|
options={{
|
|
title: t('tabs.video'),
|
|
tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.video')}</Text>),
|
|
tabBarIcon: ({ focused }: { focused: boolean }) => {
|
|
if (focused) {
|
|
return (
|
|
<LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
|
|
<VideoIcon />
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
return (
|
|
<View style={{ opacity: 0.6 }}>
|
|
<VideoIcon />
|
|
</View>
|
|
)
|
|
},
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="message"
|
|
options={{
|
|
title: t('tabs.message'),
|
|
tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.message')}</Text>),
|
|
tabBarIcon: ({ focused }: { focused: boolean }) => {
|
|
if (focused) {
|
|
return (
|
|
<LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
|
|
<MessageIcon />
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
return (
|
|
<View style={{ opacity: focused ? 1 : 0.6 }}>
|
|
<MessageIcon />
|
|
</View>
|
|
)
|
|
},
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="my"
|
|
options={{
|
|
title: t('tabs.my'),
|
|
tabBarLabel: ({ focused }: { focused: boolean }) => (focused ? null : <Text style={styles.tabLabel}>{t('tabs.my')}</Text>),
|
|
tabBarIcon: ({ focused }: { focused: boolean }) => {
|
|
if (focused) {
|
|
return (
|
|
<LinearGradient colors={['#9966FF', '#FF6699', '#FF9966']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.iconContainer}>
|
|
<MyIcon />
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
return (
|
|
<View style={{ opacity: focused ? 1 : 0.6 }}>
|
|
<MyIcon />
|
|
</View>
|
|
)
|
|
},
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
iconContainer: {
|
|
width: 87,
|
|
height: 41,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 100,
|
|
},
|
|
tabLabel: {
|
|
fontSize: 10,
|
|
color: '#FFFFFF',
|
|
textAlign: 'center',
|
|
},
|
|
})
|