reza changed home

master
Reza_ashrafi 3 years ago
parent 6450a12f9b
commit 5e8a976514
  1. BIN
      src/screens/Home/assets/arrow.png
  2. BIN
      src/screens/Home/assets/food.png
  3. BIN
      src/screens/Home/assets/message.png
  4. BIN
      src/screens/Home/assets/olum1.png
  5. BIN
      src/screens/Home/assets/olum2.png
  6. BIN
      src/screens/Home/assets/shoe.png
  7. BIN
      src/screens/Home/assets/user.png
  8. BIN
      src/screens/Home/assets/zist11.png
  9. 23
      src/screens/Home/components/2d.js
  10. 24
      src/screens/Home/components/3d.js
  11. 125
      src/screens/Home/components/Blogs.js
  12. 38
      src/screens/Home/components/Identifier.js
  13. 110
      src/screens/Home/components/MyBooks.js
  14. 113
      src/screens/Home/components/MyVideos.js
  15. 52
      src/screens/Home/components/backgroundTile.js
  16. 51
      src/screens/Home/components/carousel.js
  17. 52
      src/screens/Home/components/flexAround.js
  18. 150
      src/screens/Home/components/shop.js
  19. 140
      src/screens/Home/data.js
  20. 16
      src/screens/Home/index.js
  21. 46
      src/screens/Home/navbar.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 417 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

@ -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 (
<View style={[styles.container, { flexDirection: flexDirection }]}>
{list.map((item, i) => (
<Identifier navigation={navigation} {...item} key={i} />
))}
</View>
);
}
const { width } = Dimensions.get("window");
const styles = StyleSheet.create({
container: {
// width,
borderRadius: 10,
flex: 1
}
});
export default component2D;

@ -1,24 +0,0 @@
import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import Identifier from "./Identifier";
function component3D({ list, navigation }) {
return (
<View style={styles.container}>
{list.map((item, i) => (
<Identifier navigation={navigation} {...item} key={i} />
))}
</View>
);
}
const { width } = Dimensions.get("window");
const styles = StyleSheet.create({
container: {
// width,
borderRadius: 10,
flex: 1,
flexDirection: "row-reverse"
}
});
export default component3D;

@ -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 (
<View
style={[
tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
{
direction: 'rtl',
},
]}>
<View style={[tw.style('flex flex-row justify-between w-full')]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 18, color: '#196EC0'},
]}>
فروشگاه
</Text>
<Image source={arrowIcon} style={[{width: 30, height: 30}]} />
</View>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
<View
style={[
tw.style('flex flex-col flex-wrap'),
{height: (height / 4) * 1.52},
]}>
{blogs.map((blog, index) => (
<View style={[tw.style('items-start m-1 relative')]} key={index}>
<Image
style={[
{
width: width / 1.5,
height: height / 5,
},
tw.style('rounded-md'),
]}
source={blog.imageUrl}
/>
<View
style={[
tw.style(
'flex flex-col rounded-md bg-white absolute bottom-0 shadow-md p-2',
),
{width: '90%', left: '5%', transform: [{translateY: 32}]},
]}>
<Text
style={[
tw.style('text-blue-500 mb-4 text-left font-semibold w-full'),
{fontSize: width / 27, color: '#196EC0'},
]}>
{blog.name}
</Text>
<View style={[tw.style('flex flex-row justify-between')]}>
<View style={[tw.style('flex flex-row items-center')]}>
<Image source={userImage} style={[tw.style('rounded-full'), {width : 25, height : 25}]} />
<Text style={[tw.style(''), {color : "#196EC0", fontSize : width / 35}]}>{'اکبر یوسفی'}</Text>
</View>
<View style={[tw.style('flex flex-row items-center')]}>
<Text style={[tw.style(''), {color : "#196EC0", fontSize : width / 35}]}>{'زمان مطالعه 30 دقیقه'}</Text>
<Image source={message} style={[tw.style(''), {width : 25, height : 25}]} />
</View>
</View>
</View>
</View>
))}
</View>
</ScrollView>
</View>
);
}
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,
},
],
};

@ -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 = <Carousel navigation={item.navigation} list={item.list} />;
break;
case "2d":
component = (
<Component2D navigation={item.navigation} list={item.items} flexDirection={item.flexDirection} />
);
break;
case "3d":
component = <Component3D navigation={item.navigation} list={item.items} />;
break;
case "flex-around":
component = <FlexAround navigation={item.navigation} item={item} />;
break;
case "background-tile":
component = <BackgroundTile navigation={item.navigation} item={item} />;
break;
case "shop":
component = <Shop navigation={item.navigation} item={item} />;
break;
default:
component = null;
}
return <>{component}</>;
};
export default Identifier;

@ -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 (
<View
style={[
tw.style(
'flex flex-col shadow-sm rounded-md py-4 px-2 border items-start',
),
{
backgroundColor: '#E9F0FF',
borderColor: '#D2E0FD',
direction: 'rtl',
},
]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 18, color : '#196EC0'},
]}>
کتاب من
</Text>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
{myBooks.map((book, index) => (
<View style={[tw.style('flex flex-col mr-4 items-start')]} key={index}>
<Image
style={
[{width: width / 3, height: height / 4}, tw.style('rounded-md')]
}
source={book.imageUrl}
/>
<Text
style={[
{marginVertical: 10, color: '#05335F', fontSize: width / 27},
tw.style('font-semibold'),
]}>
{book.name}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 30}}>
{book.grade}
</Text>
<View
style={[
tw.style('rounded-md mt-4'),
{height: 6, width: '100%', backgroundColor: '#D3E9FF'},
]}>
<View
style={[
tw.style('h-full rounded-md'),
{width: book.progress + '%', backgroundColor : "#2B8DEB"},
]}></View>
</View>
</View>
))}
</ScrollView>
</View>
);
}
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,
},
],
};

@ -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 (
<View
style={[
tw.style(
'flex flex-col rounded-md pt-7 px-2 items-start',
),
{
direction: 'rtl',
},
]}>
<View style={[tw.style('flex flex-row justify-between w-full')]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 20, color: '#196EC0'},
]}>
دورههای ویدئویی شما
</Text>
<Image source={arrowIcon} style={[{width : 30, height : 30}]} />
</View>
<ScrollView
horizontal={true}
style={[tw.style('')]}
showsHorizontalScrollIndicator={false}>
{myBooks.map((book, index) => (
<View style={[tw.style('flex flex-col mr-2 items-start')]} key={index}>
<Image
style={
[{width: width / 1.7, height: height / 6}, tw.style('rounded-md')]
}
source={book.imageUrl}
/>
<Text
style={[
{marginVertical: 10, color: '#05335F', fontSize: width / 27},
tw.style('font-semibold'),
]}>
{book.name}
</Text>
<Text style={{color: '#196EC0', fontSize: width / 30}}>
{book.grade}
</Text>
<View
style={[
tw.style('rounded-md mt-4'),
{height: 6, width: '100%', backgroundColor: '#D3E9FF'},
]}>
<View
style={[
tw.style('h-full rounded-md'),
{width: book.progress + '%', backgroundColor : "#2B8DEB"},
]}></View>
</View>
</View>
))}
</ScrollView>
</View>
);
}
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,
},
],
};

@ -1,52 +0,0 @@
import React from "react";
import { StyleSheet, View, Text, ImageBackground } from "react-native";
const backgroundTile = ({ item }) => {
return (
<ImageBackground
source={{ uri: item.imageUrl }}
resizeMode="cover"
style={[styles.container, { flex: item.flex }]}
>
<View
style={[
styles.cover,
{ backgroundColor: item.backgroundColor, alignItems: item.alignItems }
]}
>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.subTitle}>{item.subTitle}</Text>
</View>
</ImageBackground>
);
};
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;

@ -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 (
<View style={styles.container}>
<SwiperFlatList
autoplay
autoplayDelay={2}
autoplayLoop
index={2}
// showPagination
data={list}
renderItem={({ item }) => (
<View style={[styles.child]}>
<ImageBackground
source={{ uri: item.imageUrl }}
resizeMode="cover"
style={styles.image}
></ImageBackground>
</View>
)}
/>
</View>
);
};
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;

@ -1,52 +0,0 @@
import React from "react";
import { StyleSheet, View, Text, Image } from "react-native";
const FlexAround = ({ item }) => {
return (
<View
style={[
styles.container,
{ flex: item.flex, backgroundColor: item.backgroundColor }
]}
>
<View style={[styles.column]}>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.subTitle}>{item.subTitle}</Text>
</View>
<Image source={{ uri: item.imageUrl }} style={styles.image} />
</View>
);
};
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;

@ -1,55 +1,113 @@
import React from "react"; import React from 'react';
import {StyleSheet, View, Text, Image, TouchableOpacity} from "react-native"; 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 ( return (
<TouchableOpacity <View
onPress={() => navigation.navigate('Products')}
style={[ style={[
styles.container, tw.style('flex flex-col shadow-sm rounded-md pt-6 px-2 items-start'),
{ flex: item.flex, backgroundColor: item.backgroundColor } {
]} direction: 'rtl',
> },
<Text style={styles.title}>{item.title}</Text> ]}>
<View style={[tw.style('flex flex-row justify-between w-full')]}>
<Text
style={[
tw.style('text-blue-500 mb-4 font-semibold'),
{fontSize: width / 18, color: '#196EC0'},
]}>
فروشگاه
</Text>
<Image source={arrowIcon} style={[{width : 30, height : 30}]} />
</View>
<View style={[styles.list]}> <ScrollView
{item.items.map((item1) => ( horizontal={true}
<View> style={[tw.style('')]}
<Image source={{ uri: item1.imageUrl }} style={styles.product} /> showsHorizontalScrollIndicator={false}>
<View
style={[
tw.style('flex flex-col flex-wrap'),
{height: (height / 4) * 1.22},
]}>
{books.map((book, index) => (
<View
style={[
tw.style('items-start m-0.5'),
{
height:
Number(index) === 0
? (height / 4) * 1.2
: (height / 4) * 0.6 - 2,
},
]}
key={index}>
<Image
style={[
{
width:
Number(index) === 0
? (width / 3) * 1.2
: (width / 3) * 0.7,
height:
Number(index) === 0
? (height / 4) * 1.2
: (height / 4) * 0.6 - 2,
},
tw.style('rounded-md'),
]}
source={book.imageUrl}
/>
</View> </View>
))} ))}
</View> </View>
</TouchableOpacity> </ScrollView>
</View>
); );
}; }
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"
}
});
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,
},
],
};

@ -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;

@ -1,15 +1,18 @@
import React from "react"; import React from "react";
import { View, StyleSheet, Dimensions, ScrollView } from "react-native"; import { View, StyleSheet, Dimensions, ScrollView } from "react-native";
import data from "./data"; import MyBooks from './components/MyBooks';
import Identifier from "./components/Identifier"; import Shop from './components/Shop';
import MyVideos from './components/MyVideos';
import Blogs from './components/Blogs';
// Within your render function // Within your render function
function Home(props) { function Home(props) {
return ( return (
<ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}> <ScrollView contentContainerStyle={styles.contentContainerStyle} style={styles.container}>
{data?.map((item, i) => ( <MyBooks />
<Identifier navigation={props.navigation} {...item} key={i} /> <Shop />
))} <MyVideos />
<Blogs />
</ScrollView> </ScrollView>
); );
} }
@ -23,7 +26,8 @@ const styles = StyleSheet.create({
width: Dimensions.get("window").width, width: Dimensions.get("window").width,
backgroundColor: "white", backgroundColor: "white",
flexDirection: "column", flexDirection: "column",
padding: 5, paddingVertical : 5,
paddingHorizontal : 10
} }
}); });

@ -1,46 +0,0 @@
import React from "react";
import { Button, StyleSheet, Text, View, Dimensions } from "react-native";
function App() {
return (
<View style={styles.navbar}>
<View style={[styles.flex, styles.row, styles.alignCenter]}>
<Text style={styles.head}>دانوین</Text>
</View>
<Button title="ورود" color="#6cbe44" />
</View>
);
}
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;
Loading…
Cancel
Save