From 4a2f62c594cd3887bc28f85435d69e099c730946 Mon Sep 17 00:00:00 2001 From: Emre Date: Thu, 2 Feb 2023 16:52:51 +0100 Subject: [PATCH] Realized Navigation tabbar and i structured the tree structure of images and files --- src/FLAD/App.tsx | 36 ++++---------------- src/FLAD/components/CardMusic.tsx | 5 +-- src/FLAD/model/Music.ts | 16 ++++----- src/FLAD/navigation/Navigation.tsx | 54 +++++++++++++++++------------- src/FLAD/package.json | 4 ++- src/FLAD/screens/favoritePage.tsx | 27 ++++++++++----- 6 files changed, 69 insertions(+), 73 deletions(-) diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index c7e5d6f..29da08e 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -2,9 +2,11 @@ import { StatusBar } from 'expo-status-bar'; import { useState, useTransition } from 'react'; import { Animated, StyleSheet, Text, View } from 'react-native'; import FavoritePage from './screens/favoritePage'; -import { cards as cardArray } from './FakeData/data' +import { cards as cardArray } from './data/data' +import Navigation from './navigation/Navigation'; +import { NavigationContainer } from '@react-navigation/native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; - export default function App() { // const [currentCard, setCurrentCard] = useState(cardArray); // const aIndex = useTransition(currentCard) @@ -24,7 +26,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { }; // const [currentCard, setCurrentCard] = useState(0); - +const Stack = createBottomTabNavigator(); return ( /* @@ -39,12 +41,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { ))} */ - - - - - - + @@ -68,23 +65,4 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center' - }, - card: { - borderRadius : 8, - shadowRadius : 20, - shadowColor : '#' - }, - image: { - width: 320, - height: 440, - borderRadius: 18, - resizeMode : "cover", - placeholder: "assets/images/loadingPlaceholder.gif" - }, -}); \ No newline at end of file + diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 81d49d7..833cd28 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -2,16 +2,17 @@ import React, {Component} from 'react'; import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native'; type CustomCardMusic = { //Props - image: any; + image: ImageSource; title: string; description: string; } export default function CardMusic(CBP: CustomCardMusic) { + const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image; return ( - + {CBP.title} diff --git a/src/FLAD/model/Music.ts b/src/FLAD/model/Music.ts index 3bb59d6..db657b8 100644 --- a/src/FLAD/model/Music.ts +++ b/src/FLAD/model/Music.ts @@ -1,10 +1,10 @@ -export class Music { - private _name: string; +export default class Music { + private _title: string; private _bio: string; private _image: ImageSource; - constructor(title: string, bio: string, image: any) { - this._title = name; + constructor(title: string, bio: string, image: ImageSource) { + this._title = title; this._bio = bio; this._image = image; } @@ -18,18 +18,18 @@ export class Music { } get bio(): string { - return this._latitude; + return this._bio; } set bio(value: string) { - this._latitude = value; + this._bio = value; } - get image(): any { + get image(): ImageSource { return this._image; } - set image(value: any) { + set image(value: ImageSource) { this._image = value; } } diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index 27c7179..b53d1bc 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -1,29 +1,35 @@ import React, {Component} from 'react'; -import { NavigationContainer } from 'react-native'; +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 Navigation() { - const BottomTabNavigator = createBottomTabNavigator(); +export default function StackNavigation() { + const Stack = createBottomTabNavigator(); return ( - - - , - }}/> - , - }}/> - - + + + + + + + ) -} + } -function TabBarIcon(props: { - name: React.ComponentProps['name']; - color: string; -}) { - return ; -} \ No newline at end of file diff --git a/src/FLAD/package.json b/src/FLAD/package.json index fc5c653..385a984 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -9,8 +9,10 @@ "web": "expo start --web" }, "dependencies": { - "@react-navigation/native": "^6.1.2", + "@react-navigation/bottom-tabs": "^6.5.4", + "@react-navigation/native": "^6.1.3", "@react-navigation/native-stack": "^6.9.8", + "@react-navigation/stack": "^6.3.12", "expo": "~47.0.12", "expo-cli": "^6.2.1", "expo-status-bar": "~1.4.2", diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx index 2027e11..35b2a88 100644 --- a/src/FLAD/screens/favoritePage.tsx +++ b/src/FLAD/screens/favoritePage.tsx @@ -1,29 +1,32 @@ import React, {Component} from 'react'; -import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native'; +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() { - export const MUSIC_LIST : Music[] = [ - new Music("La pharmacie", "Jul",require("../assets/Images/jul.png")), + 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 ( - + Favoris Retrouvez ici vos musiques favorites - + ( - navigation.navigate("")}> - - + // navigation.navigate("")}> + + // )} keyExtractor={(item: Music) => item.title } /> @@ -34,6 +37,9 @@ export default function favoritePage() { }; const styles = StyleSheet.create({ + body: { + backgroundColor: "#141414" + }, titleContainer: { marginLeft: 20, marginVertical: 50, @@ -48,4 +54,7 @@ const styles = StyleSheet.create({ fontSize: 18, color: '#787878', }, + scroll: { + marginBottom: 120, + } });