reza added activation and Faq

master
Reza_ashrafi 3 years ago
parent 1742d6abda
commit 76584c35eb
  1. 5
      navigation.js
  2. 4
      src/components/Header.js
  3. 20
      src/components/Or.js
  4. 2
      src/components/Pressable.js
  5. 4
      src/components/Search.js
  6. 31
      src/screens/Activation/index.js
  7. BIN
      src/screens/Faq/assets/+.png
  8. BIN
      src/screens/Faq/assets/-.png
  9. 0
      src/screens/Faq/assets/bgFaq.png
  10. 60
      src/screens/Faq/components/Instance.js
  11. 56
      src/screens/Faq/index.js

@ -16,7 +16,6 @@ import {useTranslation} from "react-i18next";
import Profile from "./src/screens/Profile"; import Profile from "./src/screens/Profile";
import Videos from "./src/screens/Videos"; import Videos from "./src/screens/Videos";
import Exams from "./src/screens/Exams"; import Exams from "./src/screens/Exams";
import Activation from "./src/screens/Activation";
const mapStateToProps = state => { const mapStateToProps = state => {
return { return {
@ -43,8 +42,8 @@ function BottomTab(props) {
<Tab.Screen name={'Videos'} component={Videos} options={{ <Tab.Screen name={'Videos'} component={Videos} options={{
title: t('videos') title: t('videos')
}} /> }} />
<Tab.Screen name={'Activation'} component={Activation} options={{ <Tab.Screen name={'Product'} component={Product} options={{
title: t('activation') title: t('books')
}} /> }} />
<Tab.Screen name={'Home'} component={Home} options={{ <Tab.Screen name={'Home'} component={Home} options={{
title: t('home') title: t('home')

@ -9,7 +9,7 @@ export default function Header({icon, title, description, background}) {
return ( return (
<View <View
style={[ style={[
tw.style('w-full flex flex-col items-center justify-end pb-3 relative mb-4'), tw.style('w-full flex flex-col items-center justify-end pb-3 relative mb-0'),
{height: height / 4.5, backgroundColor: '#196EC015'}, {height: height / 4.5, backgroundColor: '#196EC015'},
]}> ]}>
<Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} /> <Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} />
@ -17,7 +17,7 @@ export default function Header({icon, title, description, background}) {
<Text <Text
style={[ style={[
{fontSize: width / 18, color: '#196EC0'}, {fontSize: width / 18, color: '#196EC0'},
tw.style('font-semibold'), tw.style('font-semibold mb-1'),
]}> ]}>
{title} {title}
</Text> </Text>

@ -0,0 +1,20 @@
import React, {useState} from 'react';
import {View, Text, Dimensions} from 'react-native';
import tw from 'tailwind-react-native-classnames';
const width = Dimensions.get('window').width;
function Or(props) {
return (
<View
style={[tw.style('w-full flex flex-row justify-between items-center mt-3 mb-5')]}>
<View
style={{width: '43%', height: 1, backgroundColor: '#EFEFEF'}}></View>
<Text style={{fontSize: width / 27, color: '#C2C2C2'}}>یا</Text>
<View
style={{width: '43%', height: 1, backgroundColor: '#EFEFEF'}}></View>
</View>
);
}
export default Or;

@ -14,7 +14,7 @@ export default function Pressable1({
return ( return (
<Pressable <Pressable
style={[ style={[
tw.style('rounded-md py-3 flex flex-row justify-center mb-3'), tw.style('rounded-md py-4 flex flex-row justify-center mb-3'),
{ {
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
borderWidth: border.width, borderWidth: border.width,

@ -24,7 +24,7 @@ const Search = ({
color: '#000', color: '#000',
borderWidth: 0.5, borderWidth: 0.5,
borderColor: '#DBDBDB', borderColor: '#DBDBDB',
paddingVertical: 10, paddingVertical: 16,
paddingHorizontal: 10, paddingHorizontal: 10,
direction: direction, direction: direction,
textAlign: textAlign, textAlign: textAlign,
@ -40,7 +40,7 @@ const Search = ({
placeholderTextColor={'#cccccc'} placeholderTextColor={'#cccccc'}
value={value} value={value}
/> />
<Pressable style={tw.style('absolute left-3 top-0 transform inset-y-2')}> <Pressable style={tw.style('absolute left-3 top-0 transform inset-y-4')}>
<Image source={searchIcon} style={[{width: 20, height: 20}]} /> <Image source={searchIcon} style={[{width: 20, height: 20}]} />
</Pressable> </Pressable>
</View> </View>

@ -7,9 +7,12 @@ import {
Text, Text,
Pressable, Pressable,
Image, Image,
TextInput,
} from 'react-native'; } from 'react-native';
import tw from 'tailwind-react-native-classnames'; import tw from 'tailwind-react-native-classnames';
import Header from '../../components/Header'; import Header from '../../components/Header';
import CustomPressable from '../../components/Pressable';
import Or from '../../components/Or';
import bgQr from './assets/bgQr.png'; import bgQr from './assets/bgQr.png';
import qrIcon from './assets/qr.png'; import qrIcon from './assets/qr.png';
import alertIcon from './assets/alert.png'; import alertIcon from './assets/alert.png';
@ -67,6 +70,34 @@ function Activation(props) {
/> />
</View> </View>
</Pressable> </Pressable>
<TextInput
placeholder="کد فعالسازی"
placeholderTextColor="#70707070"
style={[
tw.style('w-full mt-4 mb-3 rounded-md text-center py-4'),
{
backgroundColor: '#F9F9F9',
borderColor: '#DFDFDF',
borderWidth: 1,
fontSize: width / 27,
},
]}
/>
<CustomPressable
title={'تایید کد'}
backgroundColor="#196EC0"
color={'white'}
border={{color: '#196EC0', width: 0}}
width={'100%'}
/>
<Or />
<CustomPressable
title={'فعالسازی با کد QR'}
backgroundColor="#98B2CB"
color={'white'}
border={{color: '#196EC0', width: 0}}
width={'100%'}
/>
</View> </View>
</ScrollView> </ScrollView>
); );

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 B

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

@ -0,0 +1,60 @@
import React, {useState} from 'react';
import {View, Text, Dimensions, Image, Pressable} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import minusIcon from '../assets/-.png';
import plusIcon from '../assets/+.png';
const width = Dimensions.get('window').width;
function Instance(props) {
const [active, setActive] = useState(false);
return (
<Pressable
onPress={() => setActive(!active)}
style={[
tw.style('w-full flex flex-col my-1.5 rounded-md px-4 py-3'),
{
backgroundColor: !active ? '#F9F9F9' : '#F6F9FD',
borderColor: !active ? '#DBDBDB' : '#196EC0',
borderWidth: 1,
},
]}>
<View
style={tw.style('flex flex-row-reverse justify-between items-center')}>
<Text
style={[
{
width: '90%',
textAlign: 'right',
color: '#196EC0',
fontSize: width / 27,
},
tw.style('font-medium'),
]}>
نحوه خرید از سایت چگونه است ؟
</Text>
<Image
source={!active ? plusIcon : minusIcon}
style={{width: 14, height: 30}}
/>
</View>
{active && (
<View style={tw.style('w-full flex flex-row-reverse pt-2')}>
<Text
style={[
{color: '#196EC0', fontSize: width / 30},
tw.style('inline text-right flex-1'),
]}>
هر نفسی که فرو می بریم، مرگی را که مدام به ما دستاندازی میکند پس
میزند... در نهایت این مرگ است که باید پیروز شود، زیرا از هنگام تولد
بخشی از سرنوشت ما شده و فقط مدت کوتاهی پیش از بلعیدن طعمه اش، با آن
بازی می کند. با این همه، ما تا آنجا که ممکن است، با علاقه فراوان و
دلواپسی
</Text>
</View>
)}
</Pressable>
);
}
export default Instance;

@ -0,0 +1,56 @@
import React, {useState} from 'react';
import {View, StyleSheet, Dimensions, ScrollView, Text} from 'react-native';
import tw from 'tailwind-react-native-classnames';
import Header from '../../components/Header';
import Search from '../../components/Search';
import Instance from './components/Instance';
import bgFaq from './assets/bgFaq.png';
const width = Dimensions.get('window').width;
function Faq(props) {
const [search, setSearch] = useState('');
const onChange = (name, value) => {};
return (
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[tw.style('bg-white flex flex-col'), {width: width}]}>
<Header
background={bgFaq}
title={'پرسشهای متداول'}
description={'تیم پشتیبانی ما اینجاست تا شما رو کمک کنه'}
// icon={}
/>
<View style={styles.container}>
<Search
value={search}
onChange={setSearch}
placeholder={'بخشی از پرسش خود را اینجا بنویسید'}
/>
<View style={tw.style('mt-2 w-full')}>
</View>
{[0,1,2,3,4].map((item, index) => (
<Instance key={index} />
))}
</View>
</ScrollView>
);
}
// Later on in your styles..
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 50,
alignItems: 'flex-end',
},
container: {
width: Dimensions.get('window').width,
backgroundColor: 'white',
flexDirection: 'column',
paddingVertical: 5,
paddingHorizontal: 10,
},
});
export default Faq;
Loading…
Cancel
Save