09470c0465
- 新增 mobile/ 项目：React Native + Expo - 5个核心页面：连接服务器、房间列表、创建房间、加入房间、设置 - Tab 导航 + Minecraft 风格深色 UI - 房间搜索/筛选（名称、房间号、房主、版本类型） - 15秒自动刷新房间列表 - 设置持久化（AsyncStorage） - EAS Build 配置（云端构建 iOS/Android） - 完整 README 含构建指南 - 更新顶层 README 为三项目全平台架构
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>
|
|
);
|
|
}
|