From 800ec5ead1950e3126467f7f5657cdbed3a8a1f2 Mon Sep 17 00:00:00 2001 From: CalebChen768 <72332844+CalebChen768@users.noreply.github.com> Date: Tue, 19 Mar 2024 00:00:58 +0800 Subject: [PATCH] test bottom navigator --- App.tsx | 118 -------------------------- src/App.tsx | 21 +++++ src/AppNavigator.tsx | 24 ++++++ src/components/BottomTabNavigator.tsx | 58 +++++++++++++ src/components/type.ts | 7 ++ src/pages/OverviewPage.tsx | 20 +++++ src/pages/ProfilePage.tsx | 20 +++++ src/pages/SavingPage.tsx | 20 +++++ src/pages/SubscriptionPage.tsx | 20 +++++ 9 files changed, 190 insertions(+), 118 deletions(-) delete mode 100644 App.tsx create mode 100644 src/App.tsx create mode 100644 src/AppNavigator.tsx create mode 100644 src/components/BottomTabNavigator.tsx create mode 100644 src/components/type.ts create mode 100644 src/pages/OverviewPage.tsx create mode 100644 src/pages/ProfilePage.tsx create mode 100644 src/pages/SavingPage.tsx create mode 100644 src/pages/SubscriptionPage.tsx diff --git a/App.tsx b/App.tsx deleted file mode 100644 index 125fe1b..0000000 --- a/App.tsx +++ /dev/null @@ -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 ( - - - {title} - - - {children} - - - ); -} - -function App(): React.JSX.Element { - const isDarkMode = useColorScheme() === 'dark'; - - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; - - return ( - - - -
- -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - - - ); -} - -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; diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..a6d077b --- /dev/null +++ b/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 ; + return ; +} +export default App; diff --git a/src/AppNavigator.tsx b/src/AppNavigator.tsx new file mode 100644 index 0000000..627b419 --- /dev/null +++ b/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 ( + + + + {/* 添加其他页面的路由 */} + + + ); +}; + +export default AppNavigator; diff --git a/src/components/BottomTabNavigator.tsx b/src/components/BottomTabNavigator.tsx new file mode 100644 index 0000000..614207d --- /dev/null +++ b/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(); // 使用类型 + +const BottomTabNavigator: React.FC = () => { + const {t} = useTranslation(); + return ( + + ({ + 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 ; + }, + tabBarActiveTintColor: 'tomato', + tabBarInactiveTintColor: 'gray', + })}> + + + + + + + ); +}; + +export default BottomTabNavigator; diff --git a/src/components/type.ts b/src/components/type.ts new file mode 100644 index 0000000..17b031c --- /dev/null +++ b/src/components/type.ts @@ -0,0 +1,7 @@ +// types.ts +export type RootTabParamList = { + Overview: undefined; + Subscription: undefined; + Saving: undefined; + Profile: undefined; +}; diff --git a/src/pages/OverviewPage.tsx b/src/pages/OverviewPage.tsx new file mode 100644 index 0000000..ce07e93 --- /dev/null +++ b/src/pages/OverviewPage.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const OverviewPage: React.FC = () => { + return ( + + Overview Page + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default OverviewPage; diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx new file mode 100644 index 0000000..a0df38b --- /dev/null +++ b/src/pages/ProfilePage.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const ProfilePage: React.FC = () => { + return ( + + Profile Page + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default ProfilePage; diff --git a/src/pages/SavingPage.tsx b/src/pages/SavingPage.tsx new file mode 100644 index 0000000..6e13b73 --- /dev/null +++ b/src/pages/SavingPage.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const SavingPage: React.FC = () => { + return ( + + Saving Page + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default SavingPage; diff --git a/src/pages/SubscriptionPage.tsx b/src/pages/SubscriptionPage.tsx new file mode 100644 index 0000000..6f43827 --- /dev/null +++ b/src/pages/SubscriptionPage.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const SubscriptionPage: React.FC = () => { + return ( + + Subscription Page + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export default SubscriptionPage;