ADD : Création de la branche navigation, Ajout de la foncitonnalité de navigation (Création d'un StackNavigator), FlexBox partout sur page acceuil.
@ -1,161 +1,6 @@
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
|
||||
|
||||
const avatar = require('./src/BobsSkins/BobClassic.png');
|
||||
const engrenage = require('./src/Icons/Engrenage.png');
|
||||
const gamepad = require('./src/Icons/Gamepad.png');
|
||||
const message = require('./src/Icons/Messages.png');
|
||||
const store = require('./src/Icons/Store.png');
|
||||
import React from 'react'
|
||||
import MainStackNavigator from './src/navigation/AppNavigator'
|
||||
|
||||
export default function App() {
|
||||
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={() => Alert.alert('le magasin')}>
|
||||
<Image
|
||||
style={styles.iconStore}
|
||||
source={store}
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export 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: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
justifyContent: 'space-evenly',
|
||||
},
|
||||
titre: {
|
||||
paddingHorizontal: '10%',
|
||||
paddingTop: 50,
|
||||
paddingBottom: 10,
|
||||
fontSize: 30,
|
||||
fontFamily: 'Helvetica',
|
||||
lineHeight: 25,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: 0.25,
|
||||
color: 'white',
|
||||
},
|
||||
engrenage: {
|
||||
marginTop: 25,
|
||||
marginRight: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: '50%',
|
||||
},
|
||||
avatar: {
|
||||
marginTop: 25,
|
||||
marginLeft: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: '50%',
|
||||
},
|
||||
buttons: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '70%',
|
||||
},
|
||||
footer: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: '#2D2C33',
|
||||
flexWrap: 'wrap',
|
||||
width: '100%',
|
||||
height: 70,
|
||||
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,
|
||||
},
|
||||
|
||||
});
|
||||
return <MainStackNavigator/>
|
||||
}
|
Before Width: | Height: | Size: 743 B |
Before Width: | Height: | Size: 782 B |
Before Width: | Height: | Size: 758 B |
Before Width: | Height: | Size: 787 B |
Before Width: | Height: | Size: 781 B |
Before Width: | Height: | Size: 769 B |
Before Width: | Height: | Size: 835 B |
Before Width: | Height: | Size: 533 B |
Before Width: | Height: | Size: 865 B |
Before Width: | Height: | Size: 693 B |
Before Width: | Height: | Size: 409 B |
Before Width: | Height: | Size: 60 KiB |
Before Width: | Height: | Size: 58 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 74 KiB |
Before Width: | Height: | Size: 257 KiB |
Before Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 66 KiB |