118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
import { StatusBar } from 'expo-status-bar';
|
|
import React from 'react';
|
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
|
|
import { Header, MainSeach } from './components/header/headerMain';
|
|
|
|
import useCachedResources from './hooks/useCachedResources';
|
|
import useColorScheme from './hooks/useColorScheme';
|
|
import Navigation from './navigation';
|
|
import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
|
|
import { Text, View, } from './components/Themed';
|
|
import TabOneScreen from './screens/TabOneScreen';
|
|
import TabTwoScreen from './screens/TabTwoScreen';
|
|
import ProductDetail from './screens/ProductDetail';
|
|
import CartDetail from './screens/Cart';
|
|
|
|
export default function App() {
|
|
const isLoadingComplete = useCachedResources();
|
|
const colorScheme = useColorScheme();
|
|
|
|
if (!isLoadingComplete) {
|
|
return null;
|
|
} else {
|
|
return (
|
|
<NavigationContainer>
|
|
<MainContentRouter />
|
|
</NavigationContainer>
|
|
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
const Drawer = createDrawerNavigator();
|
|
const Stack = createStackNavigator();
|
|
|
|
/* cài đặt thông số cho header */
|
|
const HeaderAllPageOpion = ({ navigation }: { navigation: any }) => {
|
|
return (
|
|
{
|
|
headerLeft: () => (
|
|
<Header props={navigation} />
|
|
),
|
|
headerTitle: () => (
|
|
<Text></Text>
|
|
),
|
|
headerStyle: {
|
|
backgroundColor: '#3385ff',
|
|
height: 130,
|
|
}
|
|
}
|
|
)
|
|
}
|
|
|
|
/* redirect về trang chủ */
|
|
const HomePage = ({ navigation }: { navigation: any }) => {
|
|
return (
|
|
<Stack.Navigator>
|
|
<Stack.Screen
|
|
name="homepage"
|
|
component={TabOneScreen}
|
|
options={HeaderAllPageOpion}
|
|
/>
|
|
</Stack.Navigator>
|
|
);
|
|
}
|
|
|
|
/* redirect về danh mục */
|
|
const ProductList = ({ navigation }: { navigation: any }) => {
|
|
return (
|
|
<Stack.Navigator>
|
|
<Stack.Screen
|
|
name="homepage"
|
|
component={TabTwoScreen}
|
|
options={HeaderAllPageOpion}
|
|
/>
|
|
</Stack.Navigator>
|
|
);
|
|
}
|
|
|
|
const ProductDetailRec = ({ navigation }: { navigation: any }) => {
|
|
return (
|
|
<Stack.Navigator>
|
|
<Stack.Screen
|
|
name="homepage"
|
|
component={ProductDetail}
|
|
options={HeaderAllPageOpion}
|
|
/>
|
|
</Stack.Navigator>
|
|
);
|
|
}
|
|
|
|
const CartPage = ({ navigation }: { navigation: any }) => {
|
|
return (
|
|
<Stack.Navigator>
|
|
<Stack.Screen
|
|
name="homepage"
|
|
component={CartDetail}
|
|
options={HeaderAllPageOpion}
|
|
/>
|
|
</Stack.Navigator>
|
|
);
|
|
}
|
|
|
|
const MainContentRouter = () => {
|
|
return (
|
|
<Drawer.Navigator>
|
|
<Drawer.Screen name="Home" component={HomePage} />
|
|
<Drawer.Screen name="Laptop, Máy Tính Xách Tay" component={ProductList} />
|
|
<Drawer.Screen name="Trang san pham" component={ProductDetailRec} />
|
|
<Drawer.Screen name="cart" component={CartPage} />
|
|
</Drawer.Navigator>
|
|
);
|
|
}
|
|
|