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 React, { useRef } from "react"; |
||||||
import {View, Text, Dimensions, Image} from 'react-native'; |
import { Text, TouchableOpacity, Dimensions, ScrollView } from "react-native"; |
||||||
import tw from 'tailwind-react-native-classnames'; |
import RBSheet from "react-native-raw-bottom-sheet"; |
||||||
import fontSize from '../../../constants/fontSize'; |
import tw from "tailwind-react-native-classnames"; |
||||||
import {Entypo} from '@expo/vector-icons'; |
import fontSize from "../../../constants/fontSize"; |
||||||
|
import { Entypo } from "@expo/vector-icons"; |
||||||
|
|
||||||
const width = Dimensions.get('window').width; |
export default function Description({ title, component, height }) { |
||||||
const height = Dimensions.get('window').height; |
const refRBSheet = useRef(); |
||||||
|
|
||||||
export default function Description({title, path}) { |
|
||||||
return ( |
return ( |
||||||
<View |
<> |
||||||
style={[ |
<TouchableOpacity |
||||||
tw.style('flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-2.5'), |
onPress={() => refRBSheet.current.open()} |
||||||
{ |
|
||||||
backgroundColor: '#50A9FF33' |
|
||||||
} |
|
||||||
]}> |
|
||||||
<Text |
|
||||||
style={[ |
style={[ |
||||||
{fontSize: fontSize.sm, color: '#275077', fontFamily: 'regular'}, |
tw.style( |
||||||
tw.style(''), |
"flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-3" |
||||||
]}> |
), |
||||||
{title} |
{ |
||||||
</Text> |
backgroundColor: "#50A9FF33", |
||||||
<Entypo name="chevron-small-left" size={20} color="#196EC0" /> |
}, |
||||||
</View> |
]} |
||||||
|
> |
||||||
|
<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 { View, Text, Button } from "react-native"; |
||||||
import React from 'react'; |
import React, {useRef} from "react"; |
||||||
|
import RBSheet from "react-native-raw-bottom-sheet"; |
||||||
|
|
||||||
const Tests = () => { |
export default function Test() { |
||||||
|
const refRBSheet = useRef(); |
||||||
return ( |
return ( |
||||||
<View> |
<View |
||||||
<Text></Text> |
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> |
</View> |
||||||
); |
); |
||||||
}; |
} |
||||||
|
|
||||||
export default Tests; |
|
||||||
|
|||||||
Loading…
Reference in new issue