Reza_ashrafi
/
RnDanovinExpo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added some page

Browse Source
master
Reza_ashrafi 3 years ago
parent bdde89c032
commit a680b975c3
9 changed files with 231 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      navigation/index.js
  2. 7
      src/components/Drawer.js
  3. 4
      src/components/Header.js
  4. 123
      src/screens/Activation/index.js
  5. 10
      src/screens/Faq/components/Instance.js
  6. 72
      src/screens/Faq/index.js
  7. 16
      src/screens/Product/index.js
  8. 12
      src/screens/Products/index.js
  9. 15
      src/screens/ShoppingCart/index.js

8
navigation/index.js
Unescape View File

@ -12,7 +12,9 @@ import Products from "../src/screens/Products";
import Login from "../src/screens/Login"; import Login from "../src/screens/Login";
import Otp from "../src/screens/Otp"; import Otp from "../src/screens/Otp";
import Product from "../src/screens/Product"; import Product from "../src/screens/Product";
import QR from "../src/screens/QR/index"; import QR from "../src/screens/QR";
import Faq from "../src/screens/Faq"
import Activation from "../src/screens/Activation";
import { connect } from "react-redux"; import { connect } from "react-redux";
import i18n from "../src/services/i18n"; import i18n from "../src/services/i18n";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -102,6 +104,8 @@ const HomeStackScreen = () => {
<HomeStack.Screen name="QR" component={QR} /> <HomeStack.Screen name="QR" component={QR} />
<HomeStack.Screen name="Product" component={Product} /> <HomeStack.Screen name="Product" component={Product} />
<Stack.Screen name="Orders" component={OrderStackScreen} /> <Stack.Screen name="Orders" component={OrderStackScreen} />
<Stack.Screen name="Faq" component={Faq} />
<Stack.Screen name="Activation" component={Activation} />
</HomeStack.Navigator> </HomeStack.Navigator>
); );
}; };
@ -117,6 +121,8 @@ const ProductsStackScreen = () => {
<ProductsStack.Screen name="QR" component={QR} /> <ProductsStack.Screen name="QR" component={QR} />
<ProductsStack.Screen name="Product" component={Product} /> <ProductsStack.Screen name="Product" component={Product} />
<Stack.Screen name="Orders" component={OrderStackScreen} /> <Stack.Screen name="Orders" component={OrderStackScreen} />
<Stack.Screen name="Faq" component={Faq} />
<Stack.Screen name="Activation" component={Activation} />
</ProductsStack.Navigator> </ProductsStack.Navigator>
); );
}; };

7
src/components/Drawer.js
Unescape View File

@ -58,6 +58,13 @@ const Drawer = ({ position, setBoxPosition }) => {
icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />, icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />,
toast: "", toast: "",
message: "", message: "",
},
{
name: "سوالات متداول",
route: "Faq",
icon: <Ionicons name="question" size={23} color={"#555555"} />,
toast: "",
message: "",
} }
]); ]);
const navigation = useNavigation(); const navigation = useNavigation();

4
src/components/Header.js
Unescape View File

@ -16,14 +16,14 @@ export default function Header({icon, title, description, background}) {
<Image source={icon} style={[{width : width / 5, height : height / 10, marginBottom : 10}]} /> <Image source={icon} style={[{width : width / 5, height : height / 10, marginBottom : 10}]} />
<Text <Text
style={[ style={[
{fontSize: width / 18, color: '#196EC0'}, {fontSize: width / 25, color: '#196EC0', fontFamily: 'bold'},
tw.style(' mb-1'), tw.style(' mb-1'),
]}> ]}>
{title} {title}
</Text> </Text>
<Text <Text
style={[ style={[
{color: '#86A0B9', fontSize: width / 30}, {color: '#86A0B9', fontSize: width / 36, fontFamily: 'light'},
tw.style(' mb-2'), tw.style(' mb-2'),
]}> ]}>
{description} {description}

123
src/screens/Activation/index.js
Unescape View File

@ -1,4 +1,4 @@
import React, {useState} from 'react'; import React, { useState } from "react";
import { import {
View, View,
StyleSheet, StyleSheet,
@ -8,17 +8,25 @@ import {
Pressable, Pressable,
Image, Image,
TextInput, TextInput,
} from 'react-native'; SafeAreaView,
import tw from 'tailwind-react-native-classnames'; StatusBar,
import Header from '../../components/Header'; Platform,
import CustomPressable from '../../components/Pressable'; LayoutAnimation
import Or from '../../components/Or'; } from "react-native";
import bgQr from './assets/bgQr.png'; import tw from "tailwind-react-native-classnames";
import qrIcon from './assets/qr.png'; import Header from "../../components/Header";
import alertIcon from './assets/alert.png'; import Navbar from "../../components/Navbar";
import bookIcon from './assets/book.png'; import Drawer from "../../components/Drawer";
import CustomPressable from "../../components/Pressable";
import Or from "../../components/Or";
const width = Dimensions.get('window').width; //assets
import bgQr from "./assets/bgQr.png";
import qrIcon from "./assets/qr.png";
import alertIcon from "./assets/alert.png";
import bookIcon from "./assets/book.png";
const width = Dimensions.get("window").width;
function Activation(props) { function Activation(props) {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
@ -27,79 +35,98 @@ function Activation(props) {
message: null, message: null,
file: null, file: null,
}); });
const [position, setPosition] = useState("100%");
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
const onChange = (name, value) => { const onChange = (name, value) => {
setFormData({ ...formData, [name]: value }); setFormData({ ...formData, [name]: value });
}; };
return ( return (
<ScrollView <SafeAreaView
contentContainerStyle={styles.contentContainerStyle} style={{
style={[tw.style('bg-white flex flex-col'), {width: width}]}> paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar setBoxPosition={setBoxPosition} />
<Drawer setBoxPosition={setBoxPosition} position={position} />
<Header <Header
background={bgQr} background={bgQr}
title={'فعال‌سازی کتاب دیجیتال'} title={"فعال‌سازی کتاب دیجیتال"}
description={''} description={""}
icon={qrIcon} icon={qrIcon}
/> />
<View style={tw.style('flex flex-row w-full flex-wrap p-2')}> <ScrollView
<View style={tw.style('w-full flex flex-row justify-center mb-7')}> contentContainerStyle={styles.contentContainerStyle}
<Image source={bookIcon} style={[{width: 113, height: 113}]} /> style={[tw.style("bg-white flex flex-col"), { width: width }]}
>
<View style={tw.style("flex flex-col w-full flex-wrap p-2")}>
<View style={tw.style("w-full flex flex-row justify-center mb-7")}>
<Image source={bookIcon} style={[{ width: 90, height: 90 }]} />
</View> </View>
<Pressable {/* <Pressable
style={[ style={[
tw.style( tw.style(
'w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3', "w-full rounded-md flex flex-row justify-end items-center py-3.5 px-3"
), ),
{backgroundColor: '#196EC01a'}, { backgroundColor: "#196EC01a" },
]}> ]}
>
<Text <Text
style={[ style={[
tw.style('text-right flex-1'), tw.style("text-right flex-1"),
{color: '#275077', fontSize: width / 30}, { color: "#275077", fontSize: width / 30 },
]}> ]}
>
دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون دانش آموز گرامی پس از خرید فیزیکی کتاب، یک کارت فعالسازی در درون
کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و یا کتاب قرار داده شده که شما می‌توانید با وارد کردن کد در قسمت زیر و
اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه برای یا اسکن کد QR با دوربین موبایل خود اقدام به فعالسازی امکانات ویژه
کتاب خود نمائید برای کتاب خود نمائید
</Text> </Text>
<View style={tw.style('p-2')}> <View style={tw.style("p-2")}>
<Image <Image
source={alertIcon} source={alertIcon}
style={{ width: 30, height: 30, marginLeft: 5 }} style={{ width: 30, height: 30, marginLeft: 5 }}
/> />
</View> </View>
</Pressable> </Pressable> */}
<TextInput <TextInput
placeholder="کد فعال‌سازی" placeholder="کد فعال‌سازی"
placeholderTextColor="#70707070" placeholderTextColor="#70707070"
style={[ style={[
tw.style('w-full mt-4 mb-3 rounded-md text-center py-4'), tw.style("w-full mt-4 mb-3 rounded-md text-center py-2"),
{ {
backgroundColor: '#F9F9F9', backgroundColor: "#F9F9F9",
borderColor: '#DFDFDF', borderColor: "#DFDFDF",
borderWidth: 1, borderWidth: 1,
fontSize: width / 27, fontSize: width / 31,
fontFamily: "light",
}, },
]} ]}
/> />
<CustomPressable <CustomPressable
title={'تایید کد'} title={"تایید کد"}
backgroundColor="#196EC0" backgroundColor="#196EC0"
color={'white'} color={"white"}
border={{color: '#196EC0', width: 0}} border={{ color: "#196EC0", width: 0 }}
width={'100%'} width={"100%"}
/> />
<Or /> <Or />
<CustomPressable <CustomPressable
title={'فعالسازی با کد QR'} title={"فعالسازی با کد QR"}
backgroundColor="#98B2CB" backgroundColor="#98B2CB"
color={'white'} color={"white"}
border={{color: '#196EC0', width: 0}} border={{ color: "#196EC0", width: 0 }}
width={'100%'} width={"100%"}
/> />
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaView>
); );
} }
@ -107,14 +134,14 @@ function Activation(props) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
contentContainerStyle: { contentContainerStyle: {
paddingBottom: 50, paddingBottom: 50,
alignItems: 'flex-end', alignItems: "flex-end",
}, },
container: { container: {
width: Dimensions.get('window').width, width: Dimensions.get("window").width,
backgroundColor: 'white', backgroundColor: "white",
flexDirection: 'column', flexDirection: "column",
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 16,
}, },
}); });

10
src/screens/Faq/components/Instance.js
Unescape View File

@ -12,7 +12,7 @@ function Instance(props) {
<Pressable <Pressable
onPress={() => setActive(!active)} onPress={() => setActive(!active)}
style={[ style={[
tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-3'), tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-2'),
{ {
backgroundColor: !active ? '#F9F9F9' : '#F6F9FD', backgroundColor: !active ? '#F9F9F9' : '#F6F9FD',
borderColor: !active ? '#DBDBDB' : '#196EC0', borderColor: !active ? '#DBDBDB' : '#196EC0',
@ -27,22 +27,22 @@ function Instance(props) {
width: '90%', width: '90%',
textAlign: 'right', textAlign: 'right',
color: '#196EC0', color: '#196EC0',
fontSize: width / 27, fontSize: width / 34,
fontFamily: 'bold'
}, },
tw.style('font-medium'),
]}> ]}>
نحوه خرید از سایت چگونه است ؟ نحوه خرید از سایت چگونه است ؟
</Text> </Text>
<Image <Image
source={!active ? plusIcon : minusIcon} source={!active ? plusIcon : minusIcon}
style={{width: 14, height: 30}} style={{width: 10, height: 20}}
/> />
</View> </View>
{active && ( {active && (
<View style={tw.style('w-full flex flex-row-reverse pt-2')}> <View style={tw.style('w-full flex flex-row-reverse pt-2')}>
<Text <Text
style={[ style={[
{color: '#196EC0', fontSize: width / 30}, {color: '#196EC0', fontSize: width / 36, fontFamily: 'light'},
tw.style('inline text-right flex-1'), tw.style('inline text-right flex-1'),
]}> ]}>
هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دستاندازی می‌کند پس هر نفسی که فرو می‌ بریم، مرگی را که مدام به ما دستاندازی می‌کند پس

72
src/screens/Faq/index.js
Unescape View File

@ -1,55 +1,83 @@
import React, {useState} from 'react'; import React, { useState } from "react";
import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native'; import {
import tw from 'tailwind-react-native-classnames'; View,
import Header from '../../components/Header'; StyleSheet,
import Search from '../../components/Search'; Dimensions,
import Instance from './components/Instance'; ScrollView,
import bgFaq from './assets/bgFaq.png'; Text,
SafeAreaView,
Platform,
StatusBar,
LayoutAnimation,
} from "react-native";
import tw from "tailwind-react-native-classnames";
import Header from "../../components/Header";
import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import Search from "../../components/Search";
import Instance from "./components/Instance";
import bgFaq from "./assets/bgFaq.png";
const width = Dimensions.get('window').width; const width = Dimensions.get("window").width;
function Faq(props) { function Faq(props) {
const [search, setSearch] = useState(''); const [search, setSearch] = useState("");
const [position, setPosition] = useState("100%");
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
const onChange = (name, value) => {}; const onChange = (name, value) => {};
return ( return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}}
>
<Navbar setBoxPosition={setBoxPosition} />
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView <ScrollView
contentContainerStyle={styles.contentContainerStyle} contentContainerStyle={styles.contentContainerStyle}
style={[tw.style('bg-white flex flex-col'), {width: width}]}> style={[tw.style("bg-white flex flex-col"), { width: width }]}
>
<Header <Header
background={bgFaq} background={bgFaq}
title={'پرسش‌های متداول'} title={"پرسش‌های متداول"}
description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'} description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"}
// icon={} // icon={}
/> />
<View style={styles.container}> <View style={styles.container}>
<Search <Search
value={search} value={search}
onChange={setSearch} onChange={setSearch}
placeholder={'بخشی از پرسش خود را اینجا بنویسید'} placeholder={"بخشی از پرسش خود را اینجا بنویسید"}
/> />
<View style={tw.style('mt-2 w-full')}> <View style={tw.style("mt-2 w-full")}></View>
</View>
{[0, 1, 2, 3, 4].map((item, index) => ( {[0, 1, 2, 3, 4].map((item, index) => (
<Instance key={index} /> <Instance key={index} />
))} ))}
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaView>
); );
} }
// Later on in your styles.. // Later on in your styles..
const styles = StyleSheet.create({ const styles = StyleSheet.create({
contentContainerStyle: { contentContainerStyle: {
paddingBottom: 50, paddingBottom: 100,
alignItems: 'flex-end', alignItems: "flex-end",
}, },
container: { container: {
width: Dimensions.get('window').width, width: Dimensions.get("window").width,
backgroundColor: 'white', backgroundColor: "white",
flexDirection: 'column', flexDirection: "column",
paddingVertical: 5, paddingVertical: 0,
paddingHorizontal: 10, paddingHorizontal: 16,
}, },
}); });

16
src/screens/Product/index.js
Unescape View File

@ -1,4 +1,4 @@
import React from "react"; import React, {useState} from "react";
import { import {
View, View,
StyleSheet, StyleSheet,
@ -6,6 +6,7 @@ import {
ScrollView, ScrollView,
SafeAreaView, SafeAreaView,
StatusBar, StatusBar,
LayoutAnimation
} from "react-native"; } from "react-native";
import Book from "./components/Book"; import Book from "./components/Book";
import Video from "./components/Video"; import Video from "./components/Video";
@ -13,6 +14,7 @@ import { connect } from "react-redux";
import userImage from "./assets/user.png"; import userImage from "./assets/user.png";
import poster from "./assets/poster.png"; import poster from "./assets/poster.png";
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
function Product({ function Product({
product = { product = {
@ -58,13 +60,21 @@ function Product({
], ],
}, },
}) { }) {
const [position, setPosition] = useState("100%");
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return ( return (
<SafeAreaView <SafeAreaView
style={{ style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}} }}
> >
<Navbar back={true} /> <Navbar setBoxPosition={setBoxPosition} back={true} />
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView <ScrollView
contentContainerStyle={styles.contentContainerStyle} contentContainerStyle={styles.contentContainerStyle}
style={styles.container} style={styles.container}
@ -88,7 +98,7 @@ const styles = StyleSheet.create({
backgroundColor: "white", backgroundColor: "white",
flexDirection: "column", flexDirection: "column",
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 16,
}, },
}); });
export default Product; export default Product;

12
src/screens/Products/index.js
Unescape View File

@ -7,6 +7,7 @@ import {
Dimensions, Dimensions,
SafeAreaView, SafeAreaView,
StatusBar, StatusBar,
LayoutAnimation
} from "react-native"; } from "react-native";
import tw from "tailwind-react-native-classnames"; import tw from "tailwind-react-native-classnames";
@ -16,8 +17,15 @@ import Video from "./components/Video";
import Search from "../../components/Search"; import Search from "../../components/Search";
import Select from "../../components/Select"; import Select from "../../components/Select";
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
function Products({ grades, productTypes }) { function Products({ grades, productTypes }) {
const [position, setPosition] = useState("100%");
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
const [productType, setProductType] = useState(""); const [productType, setProductType] = useState("");
const [grade, setGrade] = useState(""); const [grade, setGrade] = useState("");
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
@ -26,9 +34,11 @@ function Products({ grades, productTypes }) {
<SafeAreaView <SafeAreaView
style={{ style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}} }}
> >
<Navbar /> <Navbar setBoxPosition={setBoxPosition} />
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView <ScrollView
contentContainerStyle={styles.contentContainerStyle} contentContainerStyle={styles.contentContainerStyle}
style={styles.container} style={styles.container}

15
src/screens/ShoppingCart/index.js
Unescape View File

@ -9,12 +9,14 @@ import {
Image, Image,
SafeAreaView, SafeAreaView,
StatusBar, StatusBar,
LayoutAnimation
} from "react-native"; } from "react-native";
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import Product from "./components/Product"; import Product from "./components/Product";
import Code from "./components/Code"; import Code from "./components/Code";
import CustomPressable from "../../components/Pressable"; import CustomPressable from "../../components/Pressable";
import Navbar from "../../components/Navbar"; import Navbar from "../../components/Navbar";
import Drawer from "../../components/Drawer";
import tw from "tailwind-react-native-classnames"; import tw from "tailwind-react-native-classnames";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -49,13 +51,22 @@ const PriceStatus = ({ name, value, type }) => {
}; };
function ShoppingCart({}) { function ShoppingCart({}) {
const [position, setPosition] = useState("100%");
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return ( return (
<SafeAreaView <SafeAreaView
style={{ style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0, paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
}} }}
> >
<Navbar /> <Navbar setBoxPosition={setBoxPosition} />
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView <ScrollView
contentContainerStyle={styles.contentContainerStyle} contentContainerStyle={styles.contentContainerStyle}
style={styles.container} style={styles.container}
@ -136,6 +147,6 @@ const styles = StyleSheet.create({
backgroundColor: "white", backgroundColor: "white",
flexDirection: "column", flexDirection: "column",
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 16,
}, },
}); });

Write Preview
Loading…
Cancel
Save