ADD: Ajout de la page profile et lien avec la navigation

bob_party/src/navigation/AppNavigator.tsx

@@ -7,6 +7,7 @@ import Home from '../screens/Home'
 import Store from '../screens/Store'
 import Chat from '../screens/Chat'
 import Settings from '../screens/Settings'
+import Profile from '../screens/Profile'
 
 
 import Test from '../screens/Test'
@@ -45,6 +46,17 @@ function ChatStackScreen() {
   );
 }
 
+const ProfileStack = createStackNavigator();
+
+function ProfileStackScreen() {
+  return (
+    <ProfileStack.Navigator screenOptions={{headerShown: false}}>
+      <ProfileStack.Screen name="Profile" component={Profile} />
+      <ProfileStack.Screen name="Settings" component={Settings} />
+    </ProfileStack.Navigator>
+  );
+}
+
 const Tab = createBottomTabNavigator()
 
 function MainTabNavigator() {
@@ -58,6 +70,7 @@ function MainTabNavigator() {
         <Tab.Screen name='Home' component={HomeStackScreen} />
         <Tab.Screen name='Store' component={StoreStackScreen} />
         <Tab.Screen name='Chat' component={ChatStackScreen} />
+        <Tab.Screen name='Profile' component={Profile} />
         <Tab.Screen name='Test' component={Test} />
       </Tab.Navigator>
     </NavigationContainer>

bob_party/src/screens/Chat.tsx

@@ -13,7 +13,7 @@ function Store(props: { navigation: any; }) {
     return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Pressable onPress={() => Alert.alert('Profil Joueur')}>
+        <Pressable onPress={() => navigation.navigate('Profile')}>
           <Image
           style={styles.avatar}
           source={avatar}

bob_party/src/screens/Home.tsx

@@ -13,7 +13,7 @@ function Home(props: { navigation: any; }) {
     return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Pressable onPress={() => Alert.alert('Profil Joueur')}>
+        <Pressable onPress={() => navigation.navigate('Profile')}>
           <Image
           style={styles.avatar}
           source={avatar}

bob_party/src/screens/Profile.tsx

@@ -0,0 +1,156 @@
+import { StatusBar } from 'expo-status-bar'
+import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
+import React from 'react';
+
+const avatar = require('../../assets/Icons/BobClassic.png');
+const engrenage = require('../../assets/Icons/UnSelected/Cogs.png');
+const gamepad = require('../../assets/Icons/UnSelected/Gamepad.png');
+const message = require('../../assets/Icons/UnSelected/Chat.png');
+const store = require('../../assets/Icons/UnSelected/Store.png');
+
+function Store(props: { navigation: any; }) {
+    const { navigation } = props
+    return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Pressable>
+          <Image
+          style={styles.avatar}
+          source={avatar}
+          />
+        </Pressable>
+        <Text style={styles.titre}>BOB PARTY</Text>
+        <Pressable onPress={() => navigation.navigate('Settings')}>
+          <Image
+          style={styles.engrenage}
+          source={engrenage}
+          />
+        </Pressable>
+      </View>
+      <View style={styles.body}>
+        <Text style={styles.text}>couille</Text>
+      </View>
+      <View style={styles.footer}>
+        <Pressable onPress={() => navigation.navigate('Chat')}>
+          <Image
+          style={styles.iconFooter}
+          source={message}
+          />
+        </Pressable>
+        <Pressable onPress={() => navigation.navigate('Home')}>
+          <Image
+          style={styles.iconFooter}
+          source={gamepad}
+          />
+        </Pressable>
+        <Pressable onPress={() => navigation.navigate('Store')}>
+          <Image
+          style={styles.iconStore}
+          source={store}
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+
+function Button(props: { onPress: any; title?: any | undefined; }) {
+  const { onPress, title = 'Save' } = props;
+  return (
+    <Pressable style={styles.button} onPress={onPress}>
+      <Text style={styles.text}>{title}</Text>
+    </Pressable>
+  );
+}
+
+
+const styles = StyleSheet.create({
+    body: {
+        flex: 1,
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        width: '70%',
+    },
+    
+    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,
+  },
+  
+  footer: {
+    flex: 0.15,
+    flexDirection: 'row',
+    backgroundColor: '#2D2C33',
+    flexWrap: 'wrap',
+    width: '100%',
+    justifyContent: 'space-evenly',
+  },
+  iconFooter: {
+    marginBottom: 25,
+    marginTop: 10,
+    width: 65,
+    height: 50,
+  },
+  iconStore: {
+    marginBottom: 25,
+    marginTop: 10,
+    marginLeft: 7,
+    marginRight: 8,
+    width: 50,
+    height: 50,
+  },
+
+});
+
+export default Store

bob_party/src/screens/Store.tsx

@@ -13,7 +13,7 @@ function Store(props: { navigation: any; }) {
     return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Pressable onPress={() => Alert.alert('Profil Joueur')}>
+        <Pressable onPress={() => navigation.navigate('Profile')}>
           <Image
           style={styles.avatar}
           source={avatar}