Reza_ashrafi
3 years ago
parent
c882324bd0
commit
333d31e343
20 changed files with 551 additions and 14 deletions
Binary file not shown.
@ -0,0 +1,23 @@ |
|||||||
|
import {StyleSheet} from 'react-native'; |
||||||
|
import Video from 'react-native-video'; |
||||||
|
import file from '../assets/video.mp4'; |
||||||
|
|
||||||
|
// Within your render function, assuming you have a file called
|
||||||
|
// "background.mp4" in your project. You can include multiple videos
|
||||||
|
// on a single screen if you like.
|
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
export default function CustomVideo() { |
||||||
|
return ( |
||||||
|
<Video |
||||||
|
source={file} // Can be a URL or a local file.
|
||||||
|
ref={ref => { |
||||||
|
this.player = ref; |
||||||
|
}} // Store reference
|
||||||
|
onBuffer={this.onBuffer} // Callback when remote video is buffering
|
||||||
|
onError={this.videoError} // Callback when video cannot be loaded
|
||||||
|
style={{width: '100%', height: '100%', borderRadius : 10}} |
||||||
|
controls |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 780 B |
|
After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 956 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 853 B |
|
After Width: | Height: | Size: 591 B |
@ -0,0 +1,47 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import {View, Text, Dimensions, Image, TouchableOpacity} from 'react-native'; |
||||||
|
import tw from 'tailwind-react-native-classnames'; |
||||||
|
import {connect} from 'react-redux'; |
||||||
|
|
||||||
|
const width = Dimensions.get('window').width; |
||||||
|
const height = Dimensions.get('window').height; |
||||||
|
|
||||||
|
export default function Box({ |
||||||
|
borderColor, |
||||||
|
backgroundColor, |
||||||
|
title, |
||||||
|
text, |
||||||
|
icon, |
||||||
|
titleColor, |
||||||
|
textColor, |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<TouchableOpacity |
||||||
|
style={[ |
||||||
|
tw.style('w-full flex flex-row justify-between rounded-md p-3 mt-6'), |
||||||
|
{ |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: borderColor, |
||||||
|
backgroundColor: backgroundColor, |
||||||
|
}, |
||||||
|
]}> |
||||||
|
<Image source={icon} style={{width: 30, height: 30, margin : 4}} /> |
||||||
|
<View style={tw.style('flex flex-col items-start flex-1 ml-2')}> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw.style('fontt-bold mb-1'), |
||||||
|
{fontSize: width / 28, color: titleColor}, |
||||||
|
]}> |
||||||
|
{title} |
||||||
|
</Text> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw.style('font-light text-left'), |
||||||
|
{fontSize: width / 34, color: textColor}, |
||||||
|
]}> |
||||||
|
{text} |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
</TouchableOpacity> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import {View, Text, Dimensions} from 'react-native'; |
||||||
|
import LinearGradient from 'react-native-linear-gradient'; |
||||||
|
import tw from 'tailwind-react-native-classnames'; |
||||||
|
import {connect} from 'react-redux'; |
||||||
|
import Video from '../../../components/Video'; |
||||||
|
|
||||||
|
const width = Dimensions.get('window').width; |
||||||
|
const height = Dimensions.get('window').height; |
||||||
|
|
||||||
|
export default function Header() { |
||||||
|
return ( |
||||||
|
<View |
||||||
|
style={[tw.style('w-full px-2 relative'), {marginBottom: height / 6.5}]}> |
||||||
|
<LinearGradient |
||||||
|
start={{x: 0.0, y: 0.0}} |
||||||
|
end={{x: 1.0, y: 1.0}} |
||||||
|
locations={[0, 0.5, 0.9, 1]} |
||||||
|
colors={['#93B0FF35', '#B7C7F285', '#43CFE335', '#E2ECE995']} |
||||||
|
style={[ |
||||||
|
tw.style('w-full rounded-md flex justify-center items-center'), |
||||||
|
{height: height / 2.7}, |
||||||
|
]}> |
||||||
|
<Text |
||||||
|
style={[ |
||||||
|
tw.style('font-bold text-center'), |
||||||
|
{ |
||||||
|
fontSize: width / 20, |
||||||
|
color: '#08345F', |
||||||
|
transform: [{translateY: -40}], |
||||||
|
}, |
||||||
|
]}> |
||||||
|
{'یادگیری با طعم لذت' + |
||||||
|
'\n' + |
||||||
|
'از اول تا یازدهم در کنارتونیم' + |
||||||
|
'\n' + |
||||||
|
'یادگیری جذاب و تعاملی'} |
||||||
|
</Text> |
||||||
|
</LinearGradient> |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
tw.style( |
||||||
|
'w-full overflow-hidden rounded-md absolute bottom-0 left-0 px-2', |
||||||
|
), |
||||||
|
{ |
||||||
|
height: height / 3.5, |
||||||
|
transform: [ |
||||||
|
{translateY: height / 8.4}, |
||||||
|
{translateX: -8}, |
||||||
|
], |
||||||
|
}, |
||||||
|
]}> |
||||||
|
<Video /> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Image, |
||||||
|
Dimensions, |
||||||
|
ScrollView, |
||||||
|
TouchableOpacity, |
||||||
|
} from 'react-native'; |
||||||
|
import tw from 'tailwind-react-native-classnames'; |
||||||
|
import {connect} from 'react-redux'; |
||||||
|
|
||||||
|
import olum1Image from '../assets/olum1.png'; |
||||||
|
|
||||||
|
const width = Dimensions.get('window').width; |
||||||
|
const height = Dimensions.get('window').height; |
||||||
|
|
||||||
|
function Scroll({products}) { |
||||||
|
return ( |
||||||
|
<ScrollView horizontal={true}> |
||||||
|
<View |
||||||
|
style={[ |
||||||
|
tw.style('w-full flex flex-col flex-wrap pl-3 justify-between mt-3'), |
||||||
|
{height: height / 2.7}, |
||||||
|
]}> |
||||||
|
{products.map((product, index) => ( |
||||||
|
<Product |
||||||
|
product={product} |
||||||
|
key={index} |
||||||
|
index={Number(index)} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</View> |
||||||
|
</ScrollView> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const Product = ({product, index, navigation}) => { |
||||||
|
return ( |
||||||
|
<TouchableOpacity |
||||||
|
style={[ |
||||||
|
tw.style('rounded-md mx-1 overflow-hidden rounded-md'), |
||||||
|
{ |
||||||
|
width: index === 0 ? height / 4.5 : height / 9, |
||||||
|
height: index === 0 ? '100%' : '48%', |
||||||
|
}, |
||||||
|
]} |
||||||
|
onPress={() => navigation.navigate('Product')} |
||||||
|
> |
||||||
|
<Image |
||||||
|
source={product.imageUrl} |
||||||
|
style={{width: '100%', height: '100%'}} |
||||||
|
/> |
||||||
|
</TouchableOpacity> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = state => ({ |
||||||
|
// features: state.publicApi.home?.features,
|
||||||
|
}); |
||||||
|
export default connect(mapStateToProps, {})(Scroll); |
||||||
|
|
||||||
|
Scroll.defaultProps = { |
||||||
|
products: [ |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imageUrl: olum1Image, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
Loading…
Reference in new issue