Reza_ashrafi
3 years ago
parent
ed0b096959
commit
73bb287197
23 changed files with 669 additions and 208 deletions
@ -0,0 +1,13 @@ |
||||
import { View, Text } from 'react-native'; |
||||
import React from 'react'; |
||||
|
||||
const BottomSheet = () => { |
||||
return ( |
||||
<View> |
||||
<Text></Text> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default BottomSheet; |
||||
|
||||
@ -0,0 +1,110 @@ |
||||
import { View, Text, ScrollView, Dimensions } from "react-native"; |
||||
|
||||
import React from "react"; |
||||
import fontSize from "../../constants/fontSize"; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
const { width } = Dimensions.get("window"); |
||||
|
||||
const ProductQuestion = ({ list }) => { |
||||
const Property = ({ prop }) => { |
||||
return ( |
||||
<View style={[tw("flex flex-row-reverse mb-3")]}> |
||||
<View |
||||
style={[ |
||||
tw("rounded-md rounded-md"), |
||||
{ backgroundColor: "#f8f8f8", width: width / 3.5 }, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("py-3 pr-2"), |
||||
{ |
||||
fontFamily: "regular", |
||||
fontSize: fontSize.base, |
||||
color: "#07AFAF", |
||||
}, |
||||
]} |
||||
> |
||||
{persian[prop]} |
||||
</Text> |
||||
</View> |
||||
<View |
||||
style={[ |
||||
tw("flex-1 mr-2 rounded-md px-2 py-3"), |
||||
{ backgroundColor: "#f8f8f8" }, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("text-right"), |
||||
{ |
||||
fontFamily: "regular", |
||||
fontSize: fontSize.sm, |
||||
color: "#646464", |
||||
}, |
||||
]} |
||||
> |
||||
{list[prop]} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
); |
||||
}; |
||||
return ( |
||||
<View style={{ flex: 1, paddingHorizontal: 16 }}> |
||||
<View |
||||
onPress={() => refRBSheet.current.open()} |
||||
style={[ |
||||
tw( |
||||
"flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" |
||||
), |
||||
{ |
||||
backgroundColor: "#50A9FF33", |
||||
}, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontSize: fontSize.base, |
||||
color: "#275077", |
||||
fontFamily: "regular", |
||||
}, |
||||
]} |
||||
> |
||||
مشخصات محصول |
||||
</Text> |
||||
</View> |
||||
<ScrollView style={tw("flex-1")}> |
||||
{Object?.keys(list)?.map((prop, index) => ( |
||||
<Property prop={prop} key={index} /> |
||||
))} |
||||
</ScrollView> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default ProductQuestion; |
||||
|
||||
ProductQuestion.defaultProps = { |
||||
list: { |
||||
display: "IPS LCD 4K Samsung backlight", |
||||
weight: "2 کیلوگرم", |
||||
proccessor: "Intel core I7 11700H", |
||||
graphic: "Nvidia 3090TI 6GB", |
||||
audio: "Sonic master", |
||||
keyboard: "جزیره ای", |
||||
accessories: "کیف + کابل تبدیل برق شهری", |
||||
}, |
||||
}; |
||||
|
||||
const persian = { |
||||
display: "صفحه نمایش", |
||||
weight: "وزن", |
||||
proccessor: "پردازنده", |
||||
graphic: "پردازنده گرافیکی", |
||||
audio: "کارت صدا", |
||||
keyboard: "کیبرد", |
||||
accessories: "متعلقات جعبه", |
||||
}; |
||||
@ -0,0 +1,110 @@ |
||||
import { View, Text, ScrollView, Dimensions } from "react-native"; |
||||
|
||||
import React from "react"; |
||||
import fontSize from "../../constants/fontSize"; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
const { width } = Dimensions.get("window"); |
||||
|
||||
const ProductReviews = ({ list }) => { |
||||
const Property = ({ prop }) => { |
||||
return ( |
||||
<View style={[tw("flex flex-row-reverse mb-3")]}> |
||||
<View |
||||
style={[ |
||||
tw("rounded-md rounded-md"), |
||||
{ backgroundColor: "#f8f8f8", width: width / 3.5 }, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("py-3 pr-2"), |
||||
{ |
||||
fontFamily: "regular", |
||||
fontSize: fontSize.base, |
||||
color: "#07AFAF", |
||||
}, |
||||
]} |
||||
> |
||||
{persian[prop]} |
||||
</Text> |
||||
</View> |
||||
<View |
||||
style={[ |
||||
tw("flex-1 mr-2 rounded-md px-2 py-3"), |
||||
{ backgroundColor: "#f8f8f8" }, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("text-right"), |
||||
{ |
||||
fontFamily: "regular", |
||||
fontSize: fontSize.sm, |
||||
color: "#646464", |
||||
}, |
||||
]} |
||||
> |
||||
{list[prop]} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
); |
||||
}; |
||||
return ( |
||||
<View style={{ flex: 1, paddingHorizontal: 16 }}> |
||||
<View |
||||
onPress={() => refRBSheet.current.open()} |
||||
style={[ |
||||
tw( |
||||
"flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" |
||||
), |
||||
{ |
||||
backgroundColor: "#50A9FF33", |
||||
}, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontSize: fontSize.base, |
||||
color: "#275077", |
||||
fontFamily: "regular", |
||||
}, |
||||
]} |
||||
> |
||||
مشخصات محصول |
||||
</Text> |
||||
</View> |
||||
<ScrollView style={tw("flex-1")}> |
||||
{Object?.keys(list)?.map((prop, index) => ( |
||||
<Property prop={prop} key={index} /> |
||||
))} |
||||
</ScrollView> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default ProductReviews; |
||||
|
||||
ProductReviews.defaultProps = { |
||||
list: { |
||||
display: "IPS LCD 4K Samsung backlight", |
||||
weight: "2 کیلوگرم", |
||||
proccessor: "Intel core I7 11700H", |
||||
graphic: "Nvidia 3090TI 6GB", |
||||
audio: "Sonic master", |
||||
keyboard: "جزیره ای", |
||||
accessories: "کیف + کابل تبدیل برق شهری", |
||||
}, |
||||
}; |
||||
|
||||
const persian = { |
||||
display: "صفحه نمایش", |
||||
weight: "وزن", |
||||
proccessor: "پردازنده", |
||||
graphic: "پردازنده گرافیکی", |
||||
audio: "کارت صدا", |
||||
keyboard: "کیبرد", |
||||
accessories: "متعلقات جعبه", |
||||
}; |
||||
@ -0,0 +1,110 @@ |
||||
import { View, Text, ScrollView, Dimensions } from "react-native"; |
||||
|
||||
import React from "react"; |
||||
import fontSize from "../../constants/fontSize"; |
||||
import tw from "tailwind-rn"; |
||||
|
||||
const { width } = Dimensions.get("window"); |
||||
|
||||
const ProductSpecifications = ({ list }) => { |
||||
const Property = ({ prop }) => { |
||||
return ( |
||||
<View style={[tw("flex flex-row-reverse mb-3")]}> |
||||
<View |
||||
style={[ |
||||
tw("rounded-md rounded-md"), |
||||
{ backgroundColor: "#f8f8f8", width: width / 3.5 }, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("py-3 pr-2"), |
||||
{ |
||||
fontFamily: "regular", |
||||
fontSize: fontSize.base, |
||||
color: "#07AFAF", |
||||
}, |
||||
]} |
||||
> |
||||
{persian[prop]} |
||||
</Text> |
||||
</View> |
||||
<View |
||||
style={[ |
||||
tw("flex-1 mr-2 rounded-md px-2 py-3"), |
||||
{ backgroundColor: "#f8f8f8" }, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
tw("text-right"), |
||||
{ |
||||
fontFamily: "regular", |
||||
fontSize: fontSize.sm, |
||||
color: "#646464", |
||||
}, |
||||
]} |
||||
> |
||||
{list[prop]} |
||||
</Text> |
||||
</View> |
||||
</View> |
||||
); |
||||
}; |
||||
return ( |
||||
<View style={{ flex: 1, paddingHorizontal: 16 }}> |
||||
<View |
||||
onPress={() => refRBSheet.current.open()} |
||||
style={[ |
||||
tw( |
||||
"flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4" |
||||
), |
||||
{ |
||||
backgroundColor: "#50A9FF33", |
||||
}, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontSize: fontSize.base, |
||||
color: "#275077", |
||||
fontFamily: "regular", |
||||
}, |
||||
]} |
||||
> |
||||
مشخصات محصول |
||||
</Text> |
||||
</View> |
||||
<ScrollView style={tw("flex-1")}> |
||||
{Object?.keys(list)?.map((prop, index) => ( |
||||
<Property prop={prop} key={index} /> |
||||
))} |
||||
</ScrollView> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default ProductSpecifications; |
||||
|
||||
ProductSpecifications.defaultProps = { |
||||
list: { |
||||
display: "IPS LCD 4K Samsung backlight", |
||||
weight: "2 کیلوگرم", |
||||
proccessor: "Intel core I7 11700H", |
||||
graphic: "Nvidia 3090TI 6GB", |
||||
audio: "Sonic master", |
||||
keyboard: "جزیره ای", |
||||
accessories: "کیف + کابل تبدیل برق شهری", |
||||
}, |
||||
}; |
||||
|
||||
const persian = { |
||||
display: "صفحه نمایش", |
||||
weight: "وزن", |
||||
proccessor: "پردازنده", |
||||
graphic: "پردازنده گرافیکی", |
||||
audio: "کارت صدا", |
||||
keyboard: "کیبرد", |
||||
accessories: "متعلقات جعبه", |
||||
}; |
||||
@ -1,29 +1,61 @@ |
||||
import React from 'react'; |
||||
import {View, Text, Dimensions, Image} from 'react-native'; |
||||
import tw from 'tailwind-react-native-classnames'; |
||||
import fontSize from '../../../constants/fontSize'; |
||||
import {Entypo} from '@expo/vector-icons'; |
||||
import React, { useRef } from "react"; |
||||
import { Text, TouchableOpacity, Dimensions, ScrollView } from "react-native"; |
||||
import RBSheet from "react-native-raw-bottom-sheet"; |
||||
import tw from "tailwind-react-native-classnames"; |
||||
import fontSize from "../../../constants/fontSize"; |
||||
import { Entypo } from "@expo/vector-icons"; |
||||
|
||||
const width = Dimensions.get('window').width; |
||||
const height = Dimensions.get('window').height; |
||||
|
||||
export default function Description({title, path}) { |
||||
export default function Description({ title, component, height }) { |
||||
const refRBSheet = useRef(); |
||||
return ( |
||||
<View |
||||
style={[ |
||||
tw.style('flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-2.5'), |
||||
{ |
||||
backgroundColor: '#50A9FF33' |
||||
} |
||||
]}> |
||||
<Text |
||||
<> |
||||
<TouchableOpacity |
||||
onPress={() => refRBSheet.current.open()} |
||||
style={[ |
||||
{fontSize: fontSize.sm, color: '#275077', fontFamily: 'regular'}, |
||||
tw.style(''), |
||||
]}> |
||||
{title} |
||||
</Text> |
||||
<Entypo name="chevron-small-left" size={20} color="#196EC0" /> |
||||
</View> |
||||
tw.style( |
||||
"flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-3" |
||||
), |
||||
{ |
||||
backgroundColor: "#50A9FF33", |
||||
}, |
||||
]} |
||||
> |
||||
<Text |
||||
style={[ |
||||
{ |
||||
fontSize: fontSize.base, |
||||
color: "#275077", |
||||
fontFamily: "regular", |
||||
}, |
||||
tw.style(""), |
||||
]} |
||||
> |
||||
{title} |
||||
</Text> |
||||
<Entypo name="chevron-small-left" size={20} color="#196EC0" /> |
||||
</TouchableOpacity> |
||||
<RBSheet |
||||
ref={refRBSheet} |
||||
closeOnDragDown={true} |
||||
dragFromTopOnly={true} |
||||
closeOnPressMask={true} |
||||
height={height} |
||||
customStyles={{ |
||||
wrapper: { |
||||
backgroundColor: "#00000077", |
||||
}, |
||||
container: { |
||||
padding : 0, |
||||
borderTopLeftRadius: 30, |
||||
borderTopRightRadius: 30, |
||||
}, |
||||
draggableIcon: { |
||||
backgroundColor: "#000", |
||||
}, |
||||
}} |
||||
> |
||||
{component} |
||||
</RBSheet> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
@ -1,12 +1,34 @@ |
||||
import { View, Text } from 'react-native'; |
||||
import React from 'react'; |
||||
import { View, Text, Button } from "react-native"; |
||||
import React, {useRef} from "react"; |
||||
import RBSheet from "react-native-raw-bottom-sheet"; |
||||
|
||||
const Tests = () => { |
||||
export default function Test() { |
||||
const refRBSheet = useRef(); |
||||
return ( |
||||
<View> |
||||
<Text></Text> |
||||
<View |
||||
style={{ |
||||
flex: 1, |
||||
justifyContent: "center", |
||||
alignItems: "center", |
||||
backgroundColor: "#fff" |
||||
}} |
||||
> |
||||
<Button title="OPEN BOTTOM SHEET" onPress={() => refRBSheet.current.open()} /> |
||||
<RBSheet |
||||
ref={refRBSheet} |
||||
closeOnDragDown={true} |
||||
closeOnPressMask={true} |
||||
customStyles={{ |
||||
wrapper: { |
||||
backgroundColor: "transparent" |
||||
}, |
||||
draggableIcon: { |
||||
backgroundColor: "#000" |
||||
} |
||||
}} |
||||
> |
||||
<Text>reza</Text> |
||||
</RBSheet> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default Tests; |
||||
} |
||||
|
||||
Loading…
Reference in new issue