ducht/Hanoicomputer_App
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

sua menu

Browse Source
This commit is contained in:
ducht
2021-03-24 10:19:30 +07:00
parent e7dffeda13
commit 46b60ecb0c
8 changed files with 887 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
App.tsx
View File

@@ -25,6 +25,8 @@ import AboutUs from './screens/AboutUs';
import ContactUs from './screens/ContactUs';
import BuildPc from './screens/BuildPc';
import AccountHome from './screens/AccountHome';
import SearchProduct from './screens/SearchProduct';
import { FontAwesome } from '@expo/vector-icons';
@@ -38,9 +40,8 @@ export default function App() {
} else {
return (
<NavigationContainer>
<MainContentRouter />
<AllPage />
</NavigationContainer>
);
}
}
@@ -68,7 +69,7 @@ const HeaderAllPageOpion = ({ navigation }: { navigation: any }) => {
}
/* redirect về trang chủ */
const HomePage = ({ navigation }: { navigation: any }) => {
const HomePage = () => {
return (
<Stack.Navigator>
<Stack.Screen
@@ -80,12 +81,14 @@ const HomePage = ({ navigation }: { navigation: any }) => {
);
}
/* redirect về danh mục */
const ProductList = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="productlist"
component={TabTwoScreen}
options={HeaderAllPageOpion}
/>
@@ -95,11 +98,19 @@ const ProductList = ({ navigation }: { navigation: any }) => {
const ProductDetailRec = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Navigator initialRouteName="ProductDetail">
<Stack.Screen
name="homepage"
name="ProductDetail"
component={ProductDetail}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Danh sách sản phẩm',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -109,7 +120,7 @@ const CartPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="cart"
component={CartDetail}
options={HeaderAllPageOpion}
/>
@@ -121,7 +132,7 @@ const ArticleHomePage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="articlehome"
component={ArticleHome}
options={HeaderAllPageOpion}
/>
@@ -133,9 +144,17 @@ const ArticleListPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="articlelist"
component={ArticleList}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Danh mục Tin tức',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -145,9 +164,17 @@ const ArticleDetailPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="articledetail"
component={ArticleDetail}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Chi tiết tin tức',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -157,9 +184,17 @@ const LoginPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="login"
component={Login}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Đăng nhập',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -169,9 +204,17 @@ const RegisterPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="register"
component={Register}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Đăng ký',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -181,9 +224,17 @@ const ForgetPasswordPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="forgetpassword"
component={ForgetPassword}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Quên mật khẩu',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -193,9 +244,17 @@ const AboutUsPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="aboutus"
component={AboutUs}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Giới thiệu',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -205,9 +264,17 @@ const ContactUsPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="contactus"
component={ContactUs}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Liên hệ',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -217,9 +284,17 @@ const BuildPcPage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="buildpc"
component={BuildPc}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Xây dựng cấu hình',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
@@ -229,32 +304,246 @@ const AccountHomePage = ({ navigation }: { navigation: any }) => {
return (
<Stack.Navigator>
<Stack.Screen
name="homepage"
name="accounthome"
component={AccountHome}
options={HeaderAllPageOpion}
options={({ navigation }) => ({
headerTitle: 'Tài khoản',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
);
}
const AllPage = () => {
return (
<Stack.Navigator initialRouteName="homepage">
<Stack.Screen
name="homepage"
component={MainContentRouter}
options={{ headerShown: false }}
/>
<Stack.Screen
name="productlist"
component={TabTwoScreen}
options={({ navigation }) => ({
headerTitle: 'Danh mục sản phẩm',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="ProductDetail"
component={ProductDetail}
options={({ navigation }) => ({
headerTitle: 'Chi tiết sản phẩm',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="cart"
component={CartDetail}
options={({ navigation }) => ({
headerTitle: 'Giỏ hàng',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="articlehome"
component={ArticleHome}
options={({ navigation }) => ({
headerTitle: 'Tin tức',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="articlelist"
component={ArticleList}
options={({ navigation }) => ({
headerTitle: 'Danh sách tin tức',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="articledetail"
component={ArticleDetail}
options={({ navigation }) => ({
headerTitle: 'Chi tiết tin tức',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="login"
component={Login}
options={({ navigation }) => ({
headerTitle: 'Đăng nhập',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="register"
component={Register}
options={({ navigation }) => ({
headerTitle: 'Đăng ký',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="forgetpassword"
component={ForgetPassword}
options={({ navigation }) => ({
headerTitle: 'Quên mật khẩu',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="aboutus"
component={AboutUs}
options={({ navigation }) => ({
headerTitle: 'Giới thiệu',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="contactus"
component={ContactUs}
options={({ navigation }) => ({
headerTitle: 'Liên hệ',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="buildpc"
component={BuildPc}
options={({ navigation }) => ({
headerTitle: 'Xây dựng cấu hình',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="accounthome"
component={AccountHome}
options={({ navigation }) => ({
headerTitle: 'Tài khoản',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
<Stack.Screen
name="search"
component={SearchProduct}
options={({ navigation }) => ({
headerTitle: 'Tìm kiếm',
headerLeft: () => (
<TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
<FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
<Text style={styles.buttonGoBackText}>Quay lại</Text>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
)
}
const MainContentRouter = () => {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomePage} />
<Drawer.Navigator initialRouteName="Trang chủ">
<Drawer.Screen name="Trang chủ" component={HomePage} />
<Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
<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.Screen name="Tin tức" component={ArticleHomePage} />
<Drawer.Screen name="Tin khuyến mại" component={ArticleListPage} />
<Drawer.Screen name="Chi tiết tin" component={ArticleDetailPage} />
<Drawer.Screen name="Đăng nhập" component={LoginPage} />
<Drawer.Screen name="Đăng Ký" component={RegisterPage} />
<Drawer.Screen name="Quên mật khẩu" component={ForgetPasswordPage} />
<Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
<Drawer.Screen name="Liên hệ" component={ContactUsPage} />
<Drawer.Screen name="Xây dựng cấu hình" component={BuildPcPage} />
<Drawer.Screen name="Tài khoản" component={AccountHomePage} />
<Drawer.Screen name="Liên hệ" component={ContactUsPage} />
</Drawer.Navigator>
);
}
const styles = StyleSheet.create({
buttonGoBack: {
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 10,
},
buttonGoBackText: {
fontSize: 16,
},
buttonGoBackIcon: {
fontSize: 16,
marginRight: 10,
},
})