test bottom navigator

App.tsx

@@ -1,118 +0,0 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import React from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
-
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
-export default App;

src/App.tsx

@@ -0,0 +1,21 @@
+import React, {useEffect} from 'react';
+import AppNavigator from './AppNavigator';
+import {initializeDatabase} from './utils/DatabaseService.js';
+import DatabaseTestPage from './pages/DatabaseServiceTest.js';
+import BottomTabNavigator from './components/BottomTabNavigator.tsx';
+
+function App(): React.JSX.Element {
+  useEffect(() => {
+    initializeDatabase()
+      .then(_db => {
+        console.log('Database ready');
+      })
+      .catch(_error => {
+        console.error('Database failed to initialize');
+      });
+  }, []);
+
+  //return <AppNavigator />;
+  return <BottomTabNavigator />;
+}
+export default App;

src/AppNavigator.tsx

@@ -0,0 +1,24 @@
+// src/AppNavigator.tsx
+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import {NavigationContainer} from '@react-navigation/native';
+import LoginPage from './pages/LoginPage';
+
+const Stack = createStackNavigator();
+
+const AppNavigator = () => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Login">
+        <Stack.Screen
+          name="Login"
+          component={LoginPage}
+          options={{title: 'Login'}}
+        />
+        {/* 添加其他页面的路由 */}
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default AppNavigator;

src/components/BottomTabNavigator.tsx

@@ -0,0 +1,58 @@
+// BottomTabNavigator.tsx
+import React from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {NavigationContainer} from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {useTranslation} from 'react-i18next';
+import { RootTabParamList } from "./type.ts";
+
+import OverviewPage from '../pages/OverviewPage';
+import SubscriptionPage from '../pages/SubscriptionPage';
+import SavingPage from '../pages/SavingPage';
+import ProfilePage from '../pages/ProfilePage';
+
+const Tab = createBottomTabNavigator<RootTabParamList>(); // 使用类型
+
+const BottomTabNavigator: React.FC = () => {
+  const {t} = useTranslation();
+  return (
+    <NavigationContainer>
+      <Tab.Navigator
+        screenOptions={({route}) => ({
+          tabBarLabel: t(route.name), // 使用翻译函数获取标签
+          tabBarIcon: ({focused, color, size}) => {
+            let iconName: string;
+
+            switch (route.name) {
+              case 'Overview':
+                iconName = focused ? 'ios-home' : 'ios-home-outline';
+                break;
+              case 'Subscription':
+                iconName = focused ? 'ios-list' : 'ios-list-outline';
+                break;
+              case 'Saving':
+                iconName = focused ? 'ios-wallet' : 'ios-wallet-outline';
+                break;
+              case 'Profile':
+                iconName = focused ? 'ios-person' : 'ios-person-outline';
+                break;
+              default:
+                iconName = 'ios-alert';
+                break;
+            }
+
+            return <Icon name={iconName} size={size} color={color} />;
+          },
+          tabBarActiveTintColor: 'tomato',
+          tabBarInactiveTintColor: 'gray',
+        })}>
+        <Tab.Screen name="Overview" component={OverviewPage} />
+        <Tab.Screen name="Subscription" component={SubscriptionPage} />
+        <Tab.Screen name="Saving" component={SavingPage} />
+        <Tab.Screen name="Profile" component={ProfilePage} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default BottomTabNavigator;

src/components/type.ts

@@ -0,0 +1,7 @@
+// types.ts
+export type RootTabParamList = {
+  Overview: undefined;
+  Subscription: undefined;
+  Saving: undefined;
+  Profile: undefined;
+};

src/pages/OverviewPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const OverviewPage: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text>Overview Page</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default OverviewPage;

src/pages/ProfilePage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const ProfilePage: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text>Profile Page</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default ProfilePage;

src/pages/SavingPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const SavingPage: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text>Saving Page</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default SavingPage;

src/pages/SubscriptionPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const SubscriptionPage: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text>Subscription Page</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default SubscriptionPage;