feat: 新增移动客户端(iOS + Android)
- 新增 mobile/ 项目:React Native + Expo - 5个核心页面:连接服务器、房间列表、创建房间、加入房间、设置 - Tab 导航 + Minecraft 风格深色 UI - 房间搜索/筛选(名称、房间号、房主、版本类型) - 15秒自动刷新房间列表 - 设置持久化(AsyncStorage) - EAS Build 配置(云端构建 iOS/Android) - 完整 README 含构建指南 - 更新顶层 README 为三项目全平台架构
This commit is contained in:
70
mobile/App.tsx
Normal file
70
mobile/App.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user