71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { StatusBar } from 'expo-status-bar';
|
||
|
|
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
|
||
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||
|
|
import { Text, View } from 'react-native';
|
||
|
|
import ConnectScreen from './src/screens/ConnectScreen';
|
||
|
|
import RoomsScreen from './src/screens/RoomsScreen';
|
||
|
|
import CreateScreen from './src/screens/CreateScreen';
|
||
|
|
import JoinScreen from './src/screens/JoinScreen';
|
||
|
|
import SettingsScreen from './src/screens/SettingsScreen';
|
||
|
|
|
||
|
|
const Tab = createBottomTabNavigator();
|
||
|
|
|
||
|
|
const DarkTheme = {
|
||
|
|
...DefaultTheme,
|
||
|
|
colors: {
|
||
|
|
...DefaultTheme.colors,
|
||
|
|
primary: '#4CAF50',
|
||
|
|
background: '#1a1a2e',
|
||
|
|
card: '#16213e',
|
||
|
|
text: '#e0e0e0',
|
||
|
|
border: 'rgba(15, 52, 96, 0.6)',
|
||
|
|
notification: '#e94560',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const icons: Record<string, string> = {
|
||
|
|
Connect: '🔗',
|
||
|
|
Rooms: '🎮',
|
||
|
|
Create: '🏠',
|
||
|
|
Join: '🚀',
|
||
|
|
Settings: '⚙️',
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function App() {
|
||
|
|
return (
|
||
|
|
<NavigationContainer theme={DarkTheme}>
|
||
|
|
<StatusBar style="light" />
|
||
|
|
<Tab.Navigator
|
||
|
|
screenOptions={({ route }) => ({
|
||
|
|
headerStyle: { backgroundColor: '#16213e', elevation: 0, shadowOpacity: 0 },
|
||
|
|
headerTintColor: '#e0e0e0',
|
||
|
|
headerTitleStyle: { fontWeight: '700' },
|
||
|
|
tabBarStyle: {
|
||
|
|
backgroundColor: '#16213e',
|
||
|
|
borderTopColor: 'rgba(15, 52, 96, 0.6)',
|
||
|
|
height: 60,
|
||
|
|
paddingBottom: 8,
|
||
|
|
},
|
||
|
|
tabBarActiveTintColor: '#4CAF50',
|
||
|
|
tabBarInactiveTintColor: '#8a8a9a',
|
||
|
|
tabBarIcon: ({ color }) => (
|
||
|
|
<Text style={{ fontSize: 20 }}>{icons[route.name] || '📱'}</Text>
|
||
|
|
),
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
<Tab.Screen name="Connect" component={ConnectScreen}
|
||
|
|
options={{ title: '连接', headerTitle: 'FunConnect' }} />
|
||
|
|
<Tab.Screen name="Rooms" component={RoomsScreen}
|
||
|
|
options={{ title: '房间', headerTitle: '房间列表' }} />
|
||
|
|
<Tab.Screen name="Create" component={CreateScreen}
|
||
|
|
options={{ title: '创建', headerTitle: '创建房间' }} />
|
||
|
|
<Tab.Screen name="Join" component={JoinScreen}
|
||
|
|
options={{ title: '加入', headerTitle: '加入房间' }} />
|
||
|
|
<Tab.Screen name="Settings" component={SettingsScreen}
|
||
|
|
options={{ title: '设置', headerTitle: '设置' }} />
|
||
|
|
</Tab.Navigator>
|
||
|
|
</NavigationContainer>
|
||
|
|
);
|
||
|
|
}
|