Pure_Mall/App.js

163 lines
4.2 KiB
JavaScript
Raw Permalink Normal View History

2024-02-28 13:34:06 +08:00
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, { useEffect } from 'react';
import moment from 'moment';
import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-community/async-storage';
import { StyleSheet, ScrollView, View, Text, StatusBar } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { colors } from './src/assets/styles/colors-theme';
import Router from './router';
import { Provider } from 'mobx-react';
import { ModalPortal } from 'react-native-modals';
import Store from './src/stores/index';
import { NavigationContainer, useFocusEffect } from '@react-navigation/native';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import SplashScreen from './src/pages/splash/splashScreen';
import Main from './src/pages/main/main';
import buyHistory from './src/pages/buyHistory/buyHistory';
import Favorite from './src/pages/favorite/favorite';
import Profile from './src/pages/profile/profile';
import BuyHistory from './src/pages/buyHistory/buyHistory';
Icon.loadFont();
console.disableYellowBox = true;
const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();
const BottomTabScreen = () => (
<BottomTab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
switch (route.name) {
case 'Main':
iconName = 'home-variant';
break;
case 'BuyHistory':
iconName = 'cart';
break;
case 'Favorite':
iconName = 'heart';
break;
case 'Profile':
iconName = 'account-circle';
break;
}
return (
<Icon
name={iconName}
size={size}
color={color}
style={{ marginTop: 5 }}
/>
);
},
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}}>
<Stack.Screen
name="Main"
component={Main}
options={{ tabBarLabel: '主頁' }}
/>
<Stack.Screen
name="Favorite"
component={Favorite}
options={{ tabBarLabel: '我的清單' }}
/>
<Stack.Screen
name="BuyHistory"
component={BuyHistory}
options={{ tabBarLabel: '購買記錄' }}
/>
<Stack.Screen
name="Profile"
component={Profile}
options={{ tabBarLabel: '賬號/設定' }}
/>
</BottomTab.Navigator>
);
const App: () => React$Node = () => {
return (
<>
<Provider {...Store}>
<SafeAreaProvider>
<StatusBar
animated={true}
barStyle={'default'}
backgroundColor={'white'}
translucent={true}
/>
<NavigationContainer
onStateChange={state => Store.appStore.setRouterState(state)}
ref={navigatorRef => Store.appStore.setRouterRef(navigatorRef)}>
<Router />
</NavigationContainer>
<ModalPortal />
</SafeAreaProvider>
</Provider>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: colors.bgc,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;