修改页面

mobile/App.tsx

@@ -1,83 +1,53 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, SafeAreaView, StatusBar } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { View, Text, StatusBar } from 'react-native'
+import { NavigationContainer } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { AuthProvider, useAuth } from './src/components/AuthProvider'
 import { getStoredToken } from './src/services/api'
 import LoginScreen from './src/screens/LoginScreen'
-import HomeScreen from './src/screens/HomeScreen'
-import FeedScreen from './src/screens/FeedScreen'
-import ProfileScreen from './src/screens/ProfileScreen'
-import CheckInDetailScreen from './src/screens/CheckInDetailScreen'
-import CreateCheckInScreen from './src/screens/CreateCheckInScreen'
+import MainTabs from './src/navigation/MainTabs'
+import type { RootStackParamList } from './src/navigation/types'
 
-const TABS = [
-  { key: 'home', label: '打卡', icon: '📋' },
-  { key: 'feed', label: '广场', icon: '🌊' },
-  { key: 'profile', label: '我的', icon: '👤' },
-]
+const RootStack = createNativeStackNavigator<RootStackParamList>()
 
-function TabBar({ active, onChange }: { active: string; onChange: (k: string) => void }) {
-  return (
-    <View style={tabBarStyles.container}>
-      {TABS.map(t => (
-        <TouchableOpacity key={t.key} onPress={() => onChange(t.key)} style={tabBarStyles.tab}>
-          <Text style={tabBarStyles.icon}>{t.icon}</Text>
-          <Text style={[tabBarStyles.label, active === t.key && tabBarStyles.active]}>{t.label}</Text>
-        </TouchableOpacity>
-      ))}
-    </View>
-  )
-}
-
-const tabBarStyles = StyleSheet.create({
-  container: { flexDirection: 'row', borderTopWidth: 0.5, borderTopColor: '#E5E5EA', backgroundColor: 'rgba(245,245,247,0.95)', paddingBottom: 20, paddingTop: 6 },
-  tab: { flex: 1, alignItems: 'center', gap: 2 },
-  icon: { fontSize: 22 },
-  label: { fontSize: 10, color: '#86868B' },
-  active: { color: '#FF6B35', fontWeight: '600' },
-})
-
-function MainApp() {
+function AuthGate() {
   const { user, loading } = useAuth()
-  const [tab, setTab] = useState('home')
-  const [screen, setScreen] = useState<'loading' |const [screen, setScreen] = useState<'loading' | 'login' | 'main'>('loading')
-  const [selectedItemId, setSelectedItemId] = useState<string | null>(null)
-  const [showCreate, setShowCreate] = useState(false)| 'main'>('loading')
+  const [initialRoute, setInitialRoute] = useState<'Login' | 'MainTabs' | null>(null)
 
   useEffect(() => {
     if (!loading) {
-      getStoredToken().then(t => setScreen(t ? 'main' : 'login'))
+      getStoredToken().then((token) => {
+        setInitialRoute(token ? 'MainTabs' : 'Login')
+      })
     }
   }, [loading])
 
-  const onLogin = useCallback(() => setScreen('main'), [])
-
-  if (screen === 'loading') return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5F5F7' }}><Text style={{ color: '#86868B' }}>加载中...</Text></View>
-  if (screen === 'login') return <LoginScreen onLogin={onLogin} />
-  if (selectedItemId) return <CheckInDetailScreen itemId={selectedItemId} onBack={() => setSelectedItemId(null)} />
-  if (showCreate) return <CreateCheckInScreen onBack={() => setShowCreate(false)} onCreated={() => { setShowCreate(false); setTab('home') }} />
-
-  const renderScreen = () => {
-    switch (tab) {
-      case 'home': return <HomeScreen onSelectItem={setSelectedItemId} onCreateItem={() => setShowCreate(true)} />
-      case 'feed': return <FeedScreen />
-      case 'profile': return <ProfileScreen />
-      default: return null
-    }
+  if (!initialRoute) {
+    return (
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5F5F7' }}>
+        <Text style={{ color: '#86868B' }}>加载中...</Text>
+      </View>
+    )
   }
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: '#F5F5F7' }}>
-      <StatusBar barStyle="dark-content" background="#F5F5F7" />
-      {renderScreen()}
-      <TabBar active={tab} onChange={setTab} />
-    </SafeAreaView>
+    <RootStack.Navigator screenOptions={{ headerShown: false }}>
+      <RootStack.Screen name="Login" component={LoginScreen} />
+      <RootStack.Screen name="MainTabs" component={MainTabs} />
+    </RootStack.Navigator>
   )
 }
 
 export default function App() {
   return (
-    <AuthProvider>
-      <MainApp />
-    </AuthProvider>
+    <SafeAreaProvider>
+      <AuthProvider>
+        <NavigationContainer>
+          <StatusBar barStyle="dark-content" background="#F5F5F7" />
+          <AuthGate />
+        </NavigationContainer>
+      </AuthProvider>
+    </SafeAreaProvider>
   )
-}
+}