ADD: ajout du skinComponent dans les screens

bob_party/src/screens/Profile.tsx

@@ -5,8 +5,17 @@ import stylesScreen from './style/screens.style'
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
+import { FlatList } from 'react-native-gesture-handler';
+import { SkinComponent } from '../components/Skin';
+
+const skinTest = new Skin("Bob",require('../../assets/BobsSkins/BobClassic.png'));
+const skinBleu = new Skin("Bob Bleu", require('../../assets/BobsSkins/BobBlue.png'))
+const skinBW = new Skin("Bob BW", require('../../assets/BobsSkins/BobBW.png'))
+const skinGreen = new Skin("Bob Vert", require('../../assets/BobsSkins/BobGreen.png'))
+const skinPT = new Skin("Bob R&T", require('../../assets/BobsSkins/BobPinkTurquoise.png'))
+
+let listSkin: Array<Skin> = [skinTest, skinBleu, skinBW, skinGreen, skinPT]
 
-const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
 
 function Profile(props: { navigation: any; }) {
     const { navigation } = props
@@ -17,7 +26,12 @@ function Profile(props: { navigation: any; }) {
           nav={navigation}
           />
       <View style={styles.body}>
-        <Text>couille</Text>
+        <FlatList 
+          data={listSkin}
+          numColumns={2}
+          columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
+          keyExtractor={item =>item.getSkinName()}
+          renderItem={({item}) => <SkinComponent skin={item} state='profile'/>} />
       </View>
       <BotBar
           nav={navigation}
@@ -30,8 +44,7 @@ const styles = StyleSheet.create({
   body: {
       flex: 1,
       flexDirection: 'column',
-      alignItems: 'flex-start',
+      width: '100%',
-      width: '70%',
   },
 });
 

bob_party/src/screens/Store.tsx

@@ -5,10 +5,20 @@ import stylesScreen from './style/screens.style'
 import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
+import { FlatList } from 'react-native-gesture-handler';
+import { SkinComponent } from '../components/Skin';
 import { ElementAffichage } from '../components/Element';
 
 
-const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
+const skinTest = new Skin("Bob",require('../../assets/BobsSkins/BobClassic.png'));
+const skinBleu = new Skin("Bob Bleu", require('../../assets/BobsSkins/BobBlue.png'))
+const skinBW = new Skin("Bob BW", require('../../assets/BobsSkins/BobBW.png'))
+const skinGreen = new Skin("Bob Vert", require('../../assets/BobsSkins/BobGreen.png'))
+const skinPT = new Skin("Bob R&T", require('../../assets/BobsSkins/BobPinkTurquoise.png'))
+
+let listSkin: Array<Skin> = [skinTest, skinBleu, skinBW, skinGreen, skinPT]
+
+
 
 function Store(props: { navigation: any; }) {
     const { navigation } = props
@@ -19,12 +29,12 @@ function Store(props: { navigation: any; }) {
         nav={navigation}
       />
       <View style={styles.body}>
-        <ElementAffichage
+        <FlatList 
-          element={skinTest}
+          data={listSkin}
-          styleImage={styles.imageSkin}
+          numColumns={2}
-          styleTitle={styles.nomSkin}
+          columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
-          nav={navigation}
+          keyExtractor={item =>item.getSkinName()}
-        />
+          renderItem={({item}) => <SkinComponent skin={item} state='shop'/>} />
       </View>
       <BotBar 
           nav={navigation}
@@ -38,8 +48,7 @@ const styles = StyleSheet.create({
   body: {
     flex: 1,
     flexDirection: 'column',
-    alignItems: 'flex-start',
+    width: '100%',
-    width: '70%',
   },
   imageSkin : {
     borderRadius: 15,

bob_party/src/screens/Test.tsx

@@ -3,24 +3,20 @@ import { useState } from 'react';
 import { StyleSheet, View, Text, Alert, Pressable, Image, ImageBackground} from 'react-native'
 import React from 'react';
 import { FlatList } from 'react-native-gesture-handler';
+import { SkinComponent } from '../components/Skin';
+import { Skin } from '../core/skin';
 
-const BobClassic = require('../../assets/BobsSkins/BobClassic.png');
+const skinTest = new Skin("Bob",require('../../assets/BobsSkins/BobClassic.png'));
-const BobBW = require('../../assets/BobsSkins/BobBW.png');
+const skinBleu = new Skin("Bob Bleu", require('../../assets/BobsSkins/BobBlue.png'))
-const BobBlue = require('../../assets/BobsSkins/BobBlue.png');
+const skinBW = new Skin("Bob BW", require('../../assets/BobsSkins/BobBW.png'))
-const BobGreen = require('../../assets/BobsSkins/BobGreen.png');
+const skinGreen = new Skin("Bob Vert", require('../../assets/BobsSkins/BobGreen.png'))
-
+const skinPT = new Skin("Bob R&T", require('../../assets/BobsSkins/BobPinkTurquoise.png'))
 
+let listSkin: Array<Skin> = [skinTest, skinBleu, skinBW, skinGreen, skinPT]
 
 function Test(props: { navigation: any; }) {
     const { navigation } = props
 
-    const [skin, setSkin] = useState([
-        { name : 'BobClassic', image: BobClassic, price: 0, id: 's0001'},
-        { name : 'BobBW', image: BobBW, price: 150, id: 's0002'},
-        { name : 'BobBlue', image: BobBlue, price: 200, id: 's0003'},
-        { name : 'BobGreen', image: BobGreen, price: 200, id: 's0004'},
-    ]);
-
     const ItemSeprator = () => <View style={{
         height: 2,
         width: "100%",
@@ -28,65 +24,15 @@ function Test(props: { navigation: any; }) {
     }}/>
 
     return (
-        <View style={styles.imageWrapper}>
+        <View style={{backgroundColor: 'blue', flex: 0.7, alignSelf: 'center'}}>
-            <FlatList
+            <FlatList 
+                data={listSkin}
                 numColumns={2}
-                keyExtractor={( item ) => item.id }
+                columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
-                data={skin}
+                keyExtractor={item =>item.getSkinName()}
-                ItemSeparatorComponent={ItemSeprator}
+                renderItem={({item}) => <SkinComponent skin={item} state='shop'/>} />
-                renderItem={({ item }) => (
-                    <ImageBackground
-                        style={styles.theImage}
-                        source={item.image}
-                    >
-                        <Text>{item.price}</Text>
-                        <Text>{item.name}</Text>
-                    </ImageBackground>
-                )}
-            />
         </View>
     );
 }
 
-const styles = StyleSheet.create({
-    imageWrapper: {
-        height: 200,
-        width: 200,
-        overflow : "hidden"
-    },
-    theImage: {
-        flex: 1,
-        alignItems: "flex-end",
-        margin: 10,
-        width: "100%",
-        height: "100%",
-    },
-    container: {
-        backgroundColor: '#45444E',
-        flex: 1,
-        paddingTop: "50%",
-        paddingBottom: "50%",
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100%',
-    },
-    Text: {
-        margin: 15,
-        paddingVertical: 12,
-        width: '40%',
-        borderRadius: 10,
-        backgroundColor: '#0085FF',
-      },
-    item: {
-        marginTop: 24,
-        backgroundColor: 'pink',
-        fontSize: 24,
-    },
-    debug:{
-        flex: 0.2,
-        backgroundColor: "red",
-        padding: 50,
-    },
-});
-
 export default Test