Views_navigation #3
Views_navigation into master 2 years ago
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 834 KiB After Width: | Height: | Size: 834 KiB |
|
Before Width: | Height: | Size: 579 KiB After Width: | Height: | Size: 579 KiB |
@ -0,0 +1,35 @@
|
||||
export default class Music {
|
||||
private _title: string;
|
||||
private _bio: string;
|
||||
private _image: ImageSource;
|
||||
|
||||
constructor(title: string, bio: string, image: ImageSource) {
|
||||
this._title = title;
|
||||
this._bio = bio;
|
||||
this._image = image;
|
||||
}
|
||||
|
||||
get title(): string {
|
||||
return this._title;
|
||||
}
|
||||
|
||||
set title(value: string) {
|
||||
this._title = value;
|
||||
}
|
||||
|
||||
get bio(): string {
|
||||
return this._bio;
|
||||
}
|
||||
|
||||
set bio(value: string) {
|
||||
this._bio = value;
|
||||
}
|
||||
|
||||
get image(): ImageSource {
|
||||
return this._image;
|
||||
}
|
||||
|
||||
set image(value: ImageSource) {
|
||||
this._image = value;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
import React, {Component} from 'react';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import Home from '../screens/spot';
|
||||
import FavoritePage from '../screens/favoritePage';
|
||||
import { createStackNavigator } from '@react-navigation/stack';
|
||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||
|
||||
export default function StackNavigation() {
|
||||
const Stack = createBottomTabNavigator();
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator initialRouteName="Home"
|
||||
screenOptions={{
|
||||
|
||||
}}>
|
||||
<Stack.Screen
|
||||
name="Home"
|
||||
component={FavoritePage}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Favoris"
|
||||
component={FavoritePage}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Settings"
|
||||
component={FavoritePage}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';
|
||||
import Card from '../components/Card';
|
||||
import CardMusic from '../components/CardMusic';
|
||||
|
||||
|
||||
export default function favoritePage() {
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title}>Favoris</Text>
|
||||
<Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
|
||||
</View>
|
||||
<ScrollView>
|
||||
<CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
|
||||
<CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/>
|
||||
<CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
|
||||
<CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/>
|
||||
<CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
|
||||
<CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleContainer: {
|
||||
marginLeft: 20,
|
||||
marginVertical: 50,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
},
|
||||
description: {
|
||||
marginTop: 10,
|
||||
fontSize: 18,
|
||||
color: '#787878',
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,60 @@
|
||||
import React, {Component} from 'react';
|
||||
import { Animated, StyleSheet, Text, View, FlatList, ScrollView, TouchableHighlight } from 'react-native';
|
||||
import Card from '../components/Card';
|
||||
import CardMusic from '../components/CardMusic';
|
||||
import Music from '../model/Music'
|
||||
|
||||
export default function favoritePage() {
|
||||
const MUSIC_LIST : Music[] = [
|
||||
new Music("La pharmacie", "Jul",require("../assets/images/jul.png")),
|
||||
new Music("Deux frères", "PNL", require("../assets/images/pnl.png")),
|
||||
new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"),
|
||||
new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"),
|
||||
new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"),
|
||||
new Music("Blanka", "PNL", require("../assets/images/pnl.png")),
|
||||
]
|
||||
return (
|
||||
<View style={styles.body}>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title}>Favoris</Text>
|
||||
<Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
|
||||
</View>
|
||||
<ScrollView style={styles.scroll}>
|
||||
<View>
|
||||
<FlatList
|
||||
data={MUSIC_LIST}
|
||||
renderItem={({ item }) => (
|
||||
//<TouchableHighlight onPress={() => navigation.navigate("")}>
|
||||
<CardMusic image={item.image} title={item.title} description={item.bio}/>
|
||||
//</TouchableHighlight>
|
||||
)}
|
||||
keyExtractor={(item: Music) => item.title }
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: {
|
||||
backgroundColor: "#141414"
|
||||
},
|
||||
titleContainer: {
|
||||
marginLeft: 20,
|
||||
marginVertical: 50,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
},
|
||||
description: {
|
||||
marginTop: 10,
|
||||
fontSize: 18,
|
||||
color: '#787878',
|
||||
},
|
||||
scroll: {
|
||||
marginBottom: 120,
|
||||
}
|
||||
});
|
||||