After Width: | Height: | Size: 743 B |
After Width: | Height: | Size: 782 B |
After Width: | Height: | Size: 758 B |
After Width: | Height: | Size: 787 B |
After Width: | Height: | Size: 781 B |
After Width: | Height: | Size: 769 B |
After Width: | Height: | Size: 835 B |
After Width: | Height: | Size: 739 B |
After Width: | Height: | Size: 533 B |
After Width: | Height: | Size: 865 B |
After Width: | Height: | Size: 693 B |
After Width: | Height: | Size: 409 B |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 74 KiB |
After Width: | Height: | Size: 257 KiB |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 66 KiB |
@ -0,0 +1,52 @@
|
||||
import * as React from 'react'
|
||||
import { NavigationContainer } from '@react-navigation/native'
|
||||
import { createStackNavigator } from '@react-navigation/stack'
|
||||
|
||||
|
||||
import Home from '../screens/Home'
|
||||
import Store from '../screens/Store'
|
||||
|
||||
|
||||
// import Detail from '../screens/Detail'
|
||||
// import Settings from '../screens/Settings'
|
||||
// import Profile from '../screens/Profile'
|
||||
|
||||
const Stack = createStackNavigator()
|
||||
|
||||
|
||||
function MainStackNavigator() {
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator
|
||||
|
||||
initialRouteName='Home'
|
||||
|
||||
screenOptions={{headerShown: false,}}
|
||||
>
|
||||
|
||||
<Stack.Screen
|
||||
name='Home'
|
||||
component={Home}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Store'
|
||||
component={Store}
|
||||
/>
|
||||
{/* <Stack.Screen
|
||||
name='Detail'
|
||||
component={Detail}
|
||||
options={({ route }) => ({
|
||||
title: route.params.item.name
|
||||
})}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name='Settings'
|
||||
component={Settings}
|
||||
options={{ title: 'Settings' }}
|
||||
/> */}
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainStackNavigator
|
@ -0,0 +1,160 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||
|
||||
const avatar = require('../../assets/Icons/BobClassic.png');
|
||||
const engrenage = require('../../assets/Icons/Engrenage.png');
|
||||
const gamepad = require('../../assets/Icons/Gamepad.png');
|
||||
const message = require('../../assets/Icons/Messages.png');
|
||||
const store = require('../../assets/Icons/Store.png');
|
||||
|
||||
function Home(props) {
|
||||
const { navigation } = props
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Pressable onPress={() => Alert.alert('Profil Joueur')}>
|
||||
<Image
|
||||
style={styles.avatar}
|
||||
source={avatar}
|
||||
/>
|
||||
</Pressable>
|
||||
<Text style={styles.titre}>BOB PARTY</Text>
|
||||
<Pressable onPress={() => Alert.alert('Paramètres')}>
|
||||
<Image
|
||||
style={styles.engrenage}
|
||||
source={engrenage}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.buttons}>
|
||||
<Button
|
||||
title='Jouer Seul'
|
||||
onPress={() => Alert.alert('On Joue seul')}
|
||||
/>
|
||||
<Button
|
||||
title='Défier mes amis'
|
||||
onPress={() => Alert.alert('On Joue avec les potos')}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.footer}>
|
||||
<Pressable onPress={() => Alert.alert('Messagerie')}>
|
||||
<Image
|
||||
style={styles.iconFooter}
|
||||
source={message}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => Alert.alert('Menu des jeux')}>
|
||||
<Image
|
||||
style={styles.iconFooter}
|
||||
source={gamepad}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => navigation.navigate('Store')}>
|
||||
<Image
|
||||
style={styles.iconStore}
|
||||
source={store}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Button(props) {
|
||||
const { onPress, title = 'Save' } = props;
|
||||
return (
|
||||
<Pressable style={styles.button} onPress={onPress}>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#45444E',
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
},
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '30%',
|
||||
width: '100%',
|
||||
marginTop: '10%',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 32,
|
||||
borderRadius: 10,
|
||||
elevation: 3,
|
||||
backgroundColor: '#0085FF',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
header: {
|
||||
flex : 0.15,
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
titre: {
|
||||
flex: 0.7,
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
fontSize: 30,
|
||||
fontFamily: 'Helvetica',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
engrenage: {
|
||||
borderRadius: '50%',
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
avatar: {
|
||||
borderRadius: '50%',
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
buttons: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '70%',
|
||||
},
|
||||
footer: {
|
||||
flex: 0.15,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
iconFooter: {
|
||||
marginBot: 25,
|
||||
marginTop: 10,
|
||||
width: 65,
|
||||
height: 50,
|
||||
},
|
||||
iconStore: {
|
||||
marginBot: 25,
|
||||
marginTop: 10,
|
||||
marginLeft: 7,
|
||||
marginRight: 8,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default Home
|
@ -0,0 +1,156 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||
|
||||
const avatar = require('../../assets/Icons/BobClassic.png');
|
||||
const engrenage = require('../../assets/Icons/Engrenage.png');
|
||||
const gamepad = require('../../assets/Icons/Gamepad.png');
|
||||
const message = require('../../assets/Icons/Messages.png');
|
||||
const store = require('../../assets/Icons/Store.png');
|
||||
|
||||
function Store(props) {
|
||||
const { navigation } = props
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Pressable onPress={() => Alert.alert('Profil Joueur')}>
|
||||
<Image
|
||||
style={styles.avatar}
|
||||
source={avatar}
|
||||
/>
|
||||
</Pressable>
|
||||
<Text style={styles.titre}>BOB PARTY</Text>
|
||||
<Pressable onPress={() => Alert.alert('Paramètres')}>
|
||||
<Image
|
||||
style={styles.engrenage}
|
||||
source={engrenage}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={styles.buttons}>
|
||||
<Button
|
||||
title='LE SHOP'
|
||||
onPress={() => Alert.alert('On Joue seul')}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.footer}>
|
||||
<Pressable onPress={() => Alert.alert('Messagerie')}>
|
||||
<Image
|
||||
style={styles.iconFooter}
|
||||
source={message}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => navigation.navigate('Home')}>
|
||||
<Image
|
||||
style={styles.iconFooter}
|
||||
source={gamepad}
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={() => Alert.alert('le magasin')}>
|
||||
<Image
|
||||
style={styles.iconStore}
|
||||
source={store}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Button(props) {
|
||||
const { onPress, title = 'Save' } = props;
|
||||
return (
|
||||
<Pressable style={styles.button} onPress={onPress}>
|
||||
<Text style={styles.text}>{title}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#45444E',
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
},
|
||||
button: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '30%',
|
||||
width: '100%',
|
||||
marginTop: '10%',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 32,
|
||||
borderRadius: 10,
|
||||
elevation: 3,
|
||||
backgroundColor: '#0085FF',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
lineHeight: 21,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
header: {
|
||||
flex : 0.15,
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
titre: {
|
||||
flex: 0.7,
|
||||
flexDirection: 'column',
|
||||
textAlign: 'center',
|
||||
fontSize: 30,
|
||||
fontFamily: 'Helvetica',
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
engrenage: {
|
||||
borderRadius: '50%',
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
avatar: {
|
||||
borderRadius: '50%',
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
buttons: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '70%',
|
||||
},
|
||||
footer: {
|
||||
flex: 0.15,
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
iconFooter: {
|
||||
marginBot: 25,
|
||||
marginTop: 10,
|
||||
width: 65,
|
||||
height: 50,
|
||||
},
|
||||
iconStore: {
|
||||
marginBot: 25,
|
||||
marginTop: 10,
|
||||
marginLeft: 7,
|
||||
marginRight: 8,
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default Store
|