83 lines
3.6 KiB
TypeScript
83 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
import Svg, { Path, Circle, Rect } from 'react-native-svg';
|
|
import HomeScreen from './screens/HomeScreen';
|
|
import TestScreen from './screens/TestScreen';
|
|
import MessageScreen from './screens/MessageScreen';
|
|
|
|
const WalletIcon = ({ color, size }: { color: string; size: number }) => (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Rect x="2" y="5" width="20" height="15" rx="2" stroke={color} strokeWidth="1.8" />
|
|
<Path d="M2 10h20" stroke={color} strokeWidth="1.8" />
|
|
<Circle cx="17" cy="15" r="1.5" fill={color} />
|
|
</Svg>
|
|
);
|
|
|
|
const ToolIcon = ({ color, size }: { color: string; size: number }) => (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3-3a6 6 0 0 1-7 7l-6.4 6.4a2 2 0 1 1-2.8-2.8L10.9 10a6 6 0 0 1 7-7l-3.2 3.3z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
|
</Svg>
|
|
);
|
|
|
|
const MessageIcon = ({ color, size }: { color: string; size: number }) => (
|
|
<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
<Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
|
|
</Svg>
|
|
);
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
export default function App() {
|
|
return (
|
|
<SafeAreaProvider>
|
|
<NavigationContainer>
|
|
<Tab.Navigator
|
|
initialRouteName='Home'
|
|
screenOptions={{
|
|
tabBarActiveTintColor: '#3498db',
|
|
tabBarInactiveTintColor: '#999',
|
|
tabBarStyle: {
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
},
|
|
headerStyle: { backgroundColor: '#3498db' },
|
|
headerTintColor: '#fff',
|
|
headerTitleStyle: { fontWeight: 'bold' },
|
|
}}
|
|
>
|
|
<Tab.Screen
|
|
name="Home"
|
|
component={HomeScreen}
|
|
options={{
|
|
title: 'Wallets',
|
|
tabBarLabel: 'Wallets',
|
|
tabBarIcon: ({ color, size }) => <WalletIcon color={color} size={size} />,
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Test"
|
|
component={TestScreen}
|
|
options={{
|
|
title: 'Test',
|
|
tabBarLabel: 'Test',
|
|
tabBarIcon: ({ color, size }) => <ToolIcon color={color} size={size} />,
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Message"
|
|
component={MessageScreen}
|
|
options={{
|
|
title: 'Messages',
|
|
tabBarLabel: 'Messages',
|
|
tabBarIcon: ({ color, size }) => <MessageIcon color={color} size={size} />,
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
</NavigationContainer>
|
|
</SafeAreaProvider>
|
|
);
|
|
}
|