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