ADD : Création de la branche navigation, Ajout de la foncitonnalité de navigation (Création d'un StackNavigator), FlexBox partout sur page acceuil.

bob_party/App.js

@@ -1,161 +1,6 @@
-import { StatusBar } from 'expo-status-bar'
+import React from 'react'
-import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import MainStackNavigator from './src/navigation/AppNavigator'
-
-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');
 
 export default function App() {
-  return (
+  return <MainStackNavigator/>
-    <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,
-  },
-
-});

bob_party/package.json

@@ -9,10 +9,15 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~46.0.13",
+    "@react-navigation/bottom-tabs": "^6.4.0",
+    "@react-navigation/stack": "^6.3.2",
+    "expo": "^46.0.15",
     "expo-status-bar": "~1.4.0",
     "react": "18.0.0",
-    "react-native": "0.69.6"
+    "react-is": "^18.2.0",
+    "react-native": "0.69.6",
+    "react-navigation": "^4.4.4",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"