BOB_PARTEAM
/
BOB_PARTY
5
3
Fork 0
Code Issues 39 Pull Requests Packages Projects 2 Releases Wiki Activity

ADD: ajout du skinComponent dans les screens

Browse Source
stub-api
Alban GUILHOT 3 years ago
parent 790e12d656
commit 608e976cfc
3 changed files with 49 additions and 81 deletions
Show Stats Download Patch File Download Diff File

21
bob_party/src/screens/Profile.tsx
Unescape View File

@ -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: '70%',
width: '100%',
},
});

27
bob_party/src/screens/Store.tsx
Unescape View File

@ -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
element={skinTest}
styleImage={styles.imageSkin}
styleTitle={styles.nomSkin}
nav={navigation}
/>
<FlatList
data={listSkin}
numColumns={2}
columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
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: '70%',
width: '100%',
},
imageSkin : {
borderRadius: 15,

80
bob_party/src/screens/Test.tsx
Unescape View File

@ -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 BobBW = require('../../assets/BobsSkins/BobBW.png');
const BobBlue = require('../../assets/BobsSkins/BobBlue.png');
const BobGreen = require('../../assets/BobsSkins/BobGreen.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 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
data={listSkin}
numColumns={2}
keyExtractor={( item ) => item.id }
data={skin}
ItemSeparatorComponent={ItemSeprator}
renderItem={({ item }) => (
<ImageBackground
style={styles.theImage}
source={item.image}
>
<Text>{item.price}</Text>
<Text>{item.name}</Text>
</ImageBackground>
)}
/>
columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
keyExtractor={item =>item.getSkinName()}
renderItem={({item}) => <SkinComponent skin={item} state='shop'/>} />
</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
Write Preview
Loading…
Cancel
Save