diff --git a/src/screens/Home/assets/arrow.png b/src/screens/Home/assets/arrow.png
new file mode 100644
index 0000000..61a0a75
Binary files /dev/null and b/src/screens/Home/assets/arrow.png differ
diff --git a/src/screens/Home/assets/food.png b/src/screens/Home/assets/food.png
new file mode 100644
index 0000000..eaf90b9
Binary files /dev/null and b/src/screens/Home/assets/food.png differ
diff --git a/src/screens/Home/assets/message.png b/src/screens/Home/assets/message.png
new file mode 100644
index 0000000..d8ed921
Binary files /dev/null and b/src/screens/Home/assets/message.png differ
diff --git a/src/screens/Home/assets/olum1.png b/src/screens/Home/assets/olum1.png
new file mode 100644
index 0000000..ddaa069
Binary files /dev/null and b/src/screens/Home/assets/olum1.png differ
diff --git a/src/screens/Home/assets/olum2.png b/src/screens/Home/assets/olum2.png
new file mode 100644
index 0000000..0435ae3
Binary files /dev/null and b/src/screens/Home/assets/olum2.png differ
diff --git a/src/screens/Home/assets/shoe.png b/src/screens/Home/assets/shoe.png
new file mode 100644
index 0000000..a24f63e
Binary files /dev/null and b/src/screens/Home/assets/shoe.png differ
diff --git a/src/screens/Home/assets/user.png b/src/screens/Home/assets/user.png
new file mode 100644
index 0000000..b30d133
Binary files /dev/null and b/src/screens/Home/assets/user.png differ
diff --git a/src/screens/Home/assets/zist11.png b/src/screens/Home/assets/zist11.png
new file mode 100644
index 0000000..e442ebb
Binary files /dev/null and b/src/screens/Home/assets/zist11.png differ
diff --git a/src/screens/Home/components/2d.js b/src/screens/Home/components/2d.js
deleted file mode 100644
index b031d7a..0000000
--- a/src/screens/Home/components/2d.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { View, StyleSheet, Dimensions } from "react-native";
-import Identifier from "./Identifier";
-
-function component2D({ list, flexDirection, navigation }) {
- return (
-
- {list.map((item, i) => (
-
- ))}
-
- );
-}
-
-const { width } = Dimensions.get("window");
-const styles = StyleSheet.create({
- container: {
- // width,
- borderRadius: 10,
- flex: 1
- }
-});
-export default component2D;
diff --git a/src/screens/Home/components/3d.js b/src/screens/Home/components/3d.js
deleted file mode 100644
index 0bfec76..0000000
--- a/src/screens/Home/components/3d.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { View, StyleSheet, Dimensions } from "react-native";
-import Identifier from "./Identifier";
-
-function component3D({ list, navigation }) {
- return (
-
- {list.map((item, i) => (
-
- ))}
-
- );
-}
-
-const { width } = Dimensions.get("window");
-const styles = StyleSheet.create({
- container: {
- // width,
- borderRadius: 10,
- flex: 1,
- flexDirection: "row-reverse"
- }
-});
-export default component3D;
diff --git a/src/screens/Home/components/Blogs.js b/src/screens/Home/components/Blogs.js
new file mode 100644
index 0000000..f9727c1
--- /dev/null
+++ b/src/screens/Home/components/Blogs.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import food from '../assets/food.png';
+import arrowIcon from '../assets/arrow.png';
+import userImage from '../assets/user.png';
+import message from '../assets/message.png';
+import tw from 'tailwind-react-native-classnames';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function Shop({blogs}) {
+ return (
+
+
+
+ فروشگاه
+
+
+
+
+
+
+ {blogs.map((blog, index) => (
+
+
+
+
+ {blog.name}
+
+
+
+
+ {'اکبر یوسفی'}
+
+
+ {'زمان مطالعه 30 دقیقه'}
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+}
+
+Shop.defaultProps = {
+ blogs: [
+ {
+ name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+ imageUrl: food,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+ imageUrl: food,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+ imageUrl: food,
+ grade: 12,
+ progress: 90,
+ },
+ {
+ name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+ imageUrl: food,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+ imageUrl: food,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'آیا مواد غذای پر فیبر مفید هستند؟',
+ imageUrl: food,
+ grade: 12,
+ progress: 90,
+ },
+ ],
+};
diff --git a/src/screens/Home/components/Identifier.js b/src/screens/Home/components/Identifier.js
deleted file mode 100644
index 48394b8..0000000
--- a/src/screens/Home/components/Identifier.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import Carousel from "./carousel";
-import Component2D from "./2d";
-import Component3D from "./3d";
-import FlexAround from "./flexAround";
-import BackgroundTile from "./backgroundTile";
-import Shop from "./shop.js";
-
-const Identifier = (item) => {
- let component;
- switch (item.name) {
- case "carousel":
- component = ;
- break;
- case "2d":
- component = (
-
- );
- break;
- case "3d":
- component = ;
- break;
- case "flex-around":
- component = ;
- break;
- case "background-tile":
- component = ;
- break;
- case "shop":
- component = ;
- break;
- default:
- component = null;
- }
- return <>{component}>;
-};
-
-export default Identifier;
diff --git a/src/screens/Home/components/MyBooks.js b/src/screens/Home/components/MyBooks.js
new file mode 100644
index 0000000..94c1f2e
--- /dev/null
+++ b/src/screens/Home/components/MyBooks.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import olum2Image from '../assets/olum2.png';
+import olum1Image from '../assets/olum1.png';
+import zist11Image from '../assets/zist11.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function MyBooks({myBooks}) {
+ return (
+
+
+ کتاب من
+
+
+
+ {myBooks.map((book, index) => (
+
+
+
+ {book.name}
+
+
+ {book.grade}
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+MyBooks.defaultProps = {
+ myBooks: [
+ {
+ name: 'علوم تجربی',
+ imageUrl: zist11Image,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'زیست شناسی',
+ imageUrl: zist11Image,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'علوم اجتماعی',
+ imageUrl: zist11Image,
+ grade: 12,
+ progress: 90,
+ },
+ {
+ name: 'علوم تجربی',
+ imageUrl: zist11Image,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'زیست شناسی',
+ imageUrl: zist11Image,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'علوم اجتماعی',
+ imageUrl: zist11Image,
+ grade: 12,
+ progress: 90,
+ },
+ ],
+};
diff --git a/src/screens/Home/components/MyVideos.js b/src/screens/Home/components/MyVideos.js
new file mode 100644
index 0000000..e447075
--- /dev/null
+++ b/src/screens/Home/components/MyVideos.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import tw from 'tailwind-react-native-classnames';
+import arrowIcon from '../assets/arrow.png';
+import olum2Image from '../assets/olum2.png';
+import olum1Image from '../assets/olum1.png';
+import shoe from '../assets/shoe.png';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function MyBooks({myBooks}) {
+ return (
+
+
+
+
+ دورههای ویدئویی شما
+
+
+
+
+
+ {myBooks.map((book, index) => (
+
+
+
+ {book.name}
+
+
+ {book.grade}
+
+
+
+
+
+ ))}
+
+
+ );
+}
+
+MyBooks.defaultProps = {
+ myBooks: [
+ {
+ name: 'علوم تجربی',
+ imageUrl: shoe,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'زیست شناسی',
+ imageUrl: shoe,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'علوم اجتماعی',
+ imageUrl: shoe,
+ grade: 12,
+ progress: 90,
+ },
+ {
+ name: 'علوم تجربی',
+ imageUrl: shoe,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'زیست شناسی',
+ imageUrl: shoe,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'علوم اجتماعی',
+ imageUrl: shoe,
+ grade: 12,
+ progress: 90,
+ },
+ ],
+};
diff --git a/src/screens/Home/components/backgroundTile.js b/src/screens/Home/components/backgroundTile.js
deleted file mode 100644
index 1459dc8..0000000
--- a/src/screens/Home/components/backgroundTile.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, ImageBackground } from "react-native";
-
-const backgroundTile = ({ item }) => {
- return (
-
-
- {item.title}
- {item.subTitle}
-
-
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- margin: 5,
- borderRadius: 10,
- overflow: 'hidden',
- alignItems: 'center',
- justifyContent: 'center',
- },
- cover: {
- minHeight: "100%",
- minWidth: "100%",
- flexDirection: "column",
- justifyContent: "center",
- padding: 10,
- borderRadius: 10
- },
- title: {
- fontSize: 21,
- fontWeight: '600',
- marginBottom: 5,
- color: "white"
- },
- subTitle: {
- fontSize: 14,
- color: "white"
- }
-});
-
-export default backgroundTile;
diff --git a/src/screens/Home/components/carousel.js b/src/screens/Home/components/carousel.js
deleted file mode 100644
index 5aa80af..0000000
--- a/src/screens/Home/components/carousel.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import { ImageBackground, Dimensions, StyleSheet, View } from "react-native";
-import { SwiperFlatList } from "react-native-swiper-flatlist";
-
-const Carousel = ({ list }) => {
- return (
-
- (
-
-
-
- )}
- />
-
- );
-};
-
-const { width } = Dimensions.get("window");
-const styles = StyleSheet.create({
- container: {
- minHeight: 300,
- borderRadius: 10,
- margin: 5,
- overflow: 'hidden'
- },
- child: {
- width,
- justifyContent: "center",
- borderRadius: 10,
- alignItems: "center"
- },
- image: {
- width,
- flex: 1,
- justifyContent: "center",
- borderRadius: 10,
- }
-});
-
-export default Carousel;
diff --git a/src/screens/Home/components/flexAround.js b/src/screens/Home/components/flexAround.js
deleted file mode 100644
index 8e091bd..0000000
--- a/src/screens/Home/components/flexAround.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import { StyleSheet, View, Text, Image } from "react-native";
-
-const FlexAround = ({ item }) => {
- return (
-
-
- {item.title}
- {item.subTitle}
-
-
-
- );
-};
-
-const styles = StyleSheet.create({
- container: {
- borderRadius: 10,
- flex: 1,
- paddingVertical: 30,
- flexDirection: "row-reverse",
- alignItems: "center",
- justifyContent: "space-around",
- textAlign: "right",
- margin: 5
- },
- column: {
- display: "flex",
- flexDirection: "column"
- },
- image: {
- width: 60,
- height: 60
- },
- title: {
- fontSize: 21,
- fontWeight: '600',
- marginBottom: 5,
- color: "white"
- },
- subTitle: {
- fontSize: 14,
- color: "white"
- }
-});
-
-export default FlexAround;
diff --git a/src/screens/Home/components/shop.js b/src/screens/Home/components/shop.js
index 8b90160..8cf68ec 100644
--- a/src/screens/Home/components/shop.js
+++ b/src/screens/Home/components/shop.js
@@ -1,55 +1,113 @@
-import React from "react";
-import {StyleSheet, View, Text, Image, TouchableOpacity} from "react-native";
+import React from 'react';
+import {View, Text, ScrollView, Image, Dimensions} from 'react-native';
+import zist11Image from '../assets/zist11.png';
+import arrowIcon from '../assets/arrow.png';
+import tw from 'tailwind-react-native-classnames';
-const Shop = ({ item, navigation }) => {
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+export default function Shop({books}) {
return (
- navigation.navigate('Products')}
+
- {item.title}
-
-
- {item.items.map((item1) => (
-
-
-
- ))}
+ tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
+ {
+ direction: 'rtl',
+ },
+ ]}>
+
+
+ فروشگاه
+
+
-
- );
-};
-const styles = StyleSheet.create({
- container: {
- borderRadius: 10,
- flex: 1,
- paddingVertical: 5,
- paddingHorizontal: 10,
- flexDirection: "column",
- textAlign: "right",
- margin: 5
- },
- list: {
- display: "flex",
- flexDirection: "row",
- justifyContent: "space-around",
- marginTop: 10
- },
- product: {
- width: 50,
- height: 65,
- borderRadius: 10
- },
- title: {
- fontSize: 18,
- fontWeight: '600',
- marginBottom: 5,
- color: "white"
- }
-});
+
+
+ {books.map((book, index) => (
+
+
+
+ ))}
+
+
+
+ );
+}
-export default Shop;
+Shop.defaultProps = {
+ books: [
+ {
+ name: 'علوم تجربی',
+ imageUrl: zist11Image,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'زیست شناسی',
+ imageUrl: zist11Image,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'علوم اجتماعی',
+ imageUrl: zist11Image,
+ grade: 12,
+ progress: 90,
+ },
+ {
+ name: 'علوم تجربی',
+ imageUrl: zist11Image,
+ grade: 3,
+ progress: 70,
+ },
+ {
+ name: 'زیست شناسی',
+ imageUrl: zist11Image,
+ grade: 4,
+ progress: 60,
+ },
+ {
+ name: 'علوم اجتماعی',
+ imageUrl: zist11Image,
+ grade: 12,
+ progress: 90,
+ },
+ ],
+};
diff --git a/src/screens/Home/data.js b/src/screens/Home/data.js
deleted file mode 100644
index aa4e695..0000000
--- a/src/screens/Home/data.js
+++ /dev/null
@@ -1,140 +0,0 @@
-const data = [
- {
- name: "carousel",
- list: [
- {
- id: 0,
- imageUrl: "https://dnvn.ir/api/v1/file/5299"
- },
- {
- id: 1,
- imageUrl: "https://dnvn.ir/api/v1/file/6581"
- },
- {
- id: 2,
- imageUrl: "https://dnvn.ir/api/v1/file/6586"
- }
- ]
- },
- {
- name: "2d",
- flexDirection: "row-reverse",
- items: [
- {
- name: "flex-around",
- title: "qr خوان",
- subTitle: "در صفحات کتاب هوشمند",
- imageUrl: "https://dnvn.ir/api/v1/file/1855",
- backgroundColor: "blue",
- flex: 1
- },
- {
- name: "flex-around",
- title: "واقعیت افزوده",
- subTitle: "فعال شده و دیجیتال",
- imageUrl: "https://dnvn.ir/api/v1/file/1851",
- backgroundColor: "green",
- flex: 1
- }
- ]
- },
- {
- name: "2d",
- flexDirection: "row-reverse",
- items: [
- {
- name: "flex-around",
- title: "qr خوان",
- subTitle: "در صفحات کتاب هوشمند",
- imageUrl: "https://dnvn.ir/api/v1/file/1855",
- backgroundColor: "blue",
- flex: 1.6
- },
- {
- name: "background-tile",
- title: "کتاب های من",
- subTitle: "فعال شده و دیجیتال",
- imageUrl: "https://dnvn.ir/api/v1/file/1860",
- backgroundColor: "#ff00ff77",
- flex: 1,
- alignItems: "flex-end"
- }
- ]
- },
- {
- name: "2d",
- flexDirection: "row-reverse",
- items: [
- {
- name: "background-tile",
- title: "بلاگ",
- subTitle: "",
- imageUrl: "https://dnvn.ir/api/v1/file/1852",
- backgroundColor: "#00ff0066",
- flex: 1,
- alignItems: "center"
- },
- {
- name: "shop",
- title: "فروشگاه",
- backgroundColor: "#8888ff",
- flex: 1.6,
- items: [
- {
- id: 0,
- imageUrl: "https://dnvn.ir/api/v1/file/1857"
- },
- {
- id: 1,
- imageUrl: "https://dnvn.ir/api/v1/file/1858"
- },
- {
- id: 2,
- imageUrl: "https://dnvn.ir/api/v1/file/1859"
- }
- ]
- }
- ]
- },
- {
- name: "3d",
- items: [
- {
- name: "2d",
- flexDirection: "column",
- items: [
- {
- name: "background-tile",
- title: "پیگیری سفارشات",
- subTitle: "",
- imageUrl: "",
- backgroundColor: "#ff5555",
- flex: 1,
- alignItems: "center"
- },
- {
- name: "background-tile",
- title: "پشتیبانی",
- subTitle: "",
- imageUrl: "",
- backgroundColor: "#ffaa00",
- flex: 1,
- alignItems: "center"
- }
- ]
- },
- {
- name: "background-tile",
- title: "بلاگ",
- subTitle: "",
- imageUrl: "https://dnvn.ir/api/v1/file/1853",
- backgroundColor: "#00ffff66",
- flex: 1,
- alignItems: "center"
- }
- ]
- }
- ];
-
- export default data;
-
\ No newline at end of file
diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js
index a022342..6fe704a 100644
--- a/src/screens/Home/index.js
+++ b/src/screens/Home/index.js
@@ -1,15 +1,18 @@
import React from "react";
import { View, StyleSheet, Dimensions, ScrollView } from "react-native";
-import data from "./data";
-import Identifier from "./components/Identifier";
+import MyBooks from './components/MyBooks';
+import Shop from './components/Shop';
+import MyVideos from './components/MyVideos';
+import Blogs from './components/Blogs';
// Within your render function
function Home(props) {
return (
- {data?.map((item, i) => (
-
- ))}
+
+
+
+
);
}
@@ -23,7 +26,8 @@ const styles = StyleSheet.create({
width: Dimensions.get("window").width,
backgroundColor: "white",
flexDirection: "column",
- padding: 5,
+ paddingVertical : 5,
+ paddingHorizontal : 10
}
});
diff --git a/src/screens/Home/navbar.js b/src/screens/Home/navbar.js
deleted file mode 100644
index be461ec..0000000
--- a/src/screens/Home/navbar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-
-import { Button, StyleSheet, Text, View, Dimensions } from "react-native";
-
-function App() {
- return (
-
-
- دانوین
-
-
-
- );
-}
-
-const styles = StyleSheet.create({
- navbar: {
- position: "fixed",
- display: "flex",
- paddingHorizontal: 10,
- flexDirection: "row-reverse",
- left: 0,
- top: 0,
- width: Dimensions.get("window").width,
- height: 60,
- backgroundColor: "#ccc",
- justifyContent: "space-between",
- alignItems: "center"
- },
- head: {
- fontWeight: "bold",
- fontSize: 20,
- marginRight: 10
- },
- flex: {
- display: "flex"
- },
- row: {
- flexDirection: "row-reverse"
- },
- alignCenter: {
- alignItems: "center"
- }
-});
-
-export default App;