tony.fages
/
Tp_ReactNative
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tp3

Browse Source
part3
Tony Fages 1 year ago
parent 0c3a3537b6
commit 419b6eb88a
7 changed files with 271 additions and 5 deletions
Show Stats Download Patch File Download Diff File

77
JokesApp/components/HorizontalListJokeComponent.tsx
Unescape View File

@ -0,0 +1,77 @@
import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
import React from "react";
import {Joke} from "../model/Joke";
import * as url from "url";
import {greyColor, indigo, purpleColor} from "../Theme";
type JokeListItemProps = {
item: Joke;
}
export function HorizontalListJokeComponent(props: JokeListItemProps) {
return (
<View style={styles.listItem}>
<View style={styles.rectangle}></View>
<Image style={styles.imageSettings} source={{
uri: props.item.image}}/>
<View style={styles.contentList}>
<Text style={styles.titleResume}>Résumé de la blague</Text>
<Text style={styles.contentSummary}>{props.item.summary()}</Text>
</View>
</View>
)
}
const styles = StyleSheet.create({
titleResume: {
fontSize: 15,
fontWeight: 'bold',
marginBottom: 20,
color: "white",
textAlign: 'center',
},
listItem: {
flexDirection: 'column',
alignItems: 'center',
backgroundColor: indigo,
margin: 10,
height: 270,
width: 250,
borderRadius: 5,
},
imageSettings: {
width: '75%',
height: 150,
position: 'absolute',
margin: 5,
},
contentList :{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
margin: 30,
},
chip: {
borderRadius: 16,
backgroundColor: greyColor,
padding: 5,
marginTop: 5,
alignSelf: 'center',
},
rectangle: {
borderRadius: 4,
flexShrink: 0,
width: "100%",
height: "20%",
backgroundColor: 'darksalmon',
},
contentSummary: {
textAlign: 'center',
color: "white",
}
});

37
JokesApp/components/ListAllCategories.tsx
Unescape View File

@ -0,0 +1,37 @@
import {Joke} from "../model/Joke";
import {Image, StyleSheet, Text, View} from "react-native";
import React from "react";
import {indigo} from "../Theme";
type JokeListItemProps = {
item: Joke;
}
export function ListAllCategories(props: JokeListItemProps) {
return (
<View style={styles.listItem}>
<View style={styles.chip}>
<Text>{props.item.type()}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
listItem: {
flexDirection: 'column',
alignItems: 'flex-start',
margin: 10,
},
chip: {
borderRadius: 16,
backgroundColor: 'rgba(140, 140, 161, 1)',
padding: 5,
marginTop: 5,
alignSelf: 'flex-start',
},
});

3
JokesApp/components/ListeJokeComponent.tsx
Unescape View File

@ -2,6 +2,7 @@ import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
import React from "react";
import {Joke} from "../model/Joke";
import * as url from "url";
import {indigo} from "../Theme";
type JokeListItemProps = {
item: Joke;
@ -36,7 +37,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
alignItems: 'center',
margin: 10,
backgroundColor : "rgba(14, 14, 44, 1)",
backgroundColor : indigo,
},
imageSettings: {
width: '40%',

10
JokesApp/navigation/Navigation.tsx
Unescape View File

@ -4,6 +4,9 @@ import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {ListJokeScreen} from "../screens/ListJokeScreen";
import {Image, StyleSheet, View} from "react-native";
import {darksalmonColor, greyColor, indigo, purpleColor} from "../Theme";
import {AccueilScreen} from "../screens/AccueilScreen";
import {AddJokeScreen} from "../screens/AddJokeScreen";
import {SettingsScreen} from "../screens/SettingsScreen";
const homeIcon = require("../assets/home_icon.png");
const listIcon = require("../assets/list_icon.png");
const addIcon = require("../assets/add_icon.png");
@ -27,7 +30,7 @@ export function Navigation(){
tabBarShowLabel: false,
tabBarStyle: styles.top,
}} >
<BottomTabNavigator.Screen name="Accueil" component={ListJokeScreen}
<BottomTabNavigator.Screen name="Accueil" component={AccueilScreen}
options={{
tabBarIcon: ({focused}) => (
<Image
@ -44,9 +47,8 @@ export function Navigation(){
/>
)
}}/>
<BottomTabNavigator.Screen name="Ajouter" component={ListJokeScreen}
<BottomTabNavigator.Screen name="Ajouter" component={AddJokeScreen}
options={{
tabBarShowLabel: false,
tabBarIcon: ({focused}) => (
<View style={styles.addJoke}>
<Image source={addIcon}
@ -64,7 +66,7 @@ export function Navigation(){
/>
)
}}/>
<BottomTabNavigator.Screen name="Paramètres" component={ListJokeScreen}
<BottomTabNavigator.Screen name="Paramètres" component={SettingsScreen}
options={{
tabBarIcon: ({focused}) => (
<Image source={setIcon}

83
JokesApp/screens/AccueilScreen.tsx
Unescape View File

@ -0,0 +1,83 @@
import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
import {indigo, purpleColor} from "../Theme";
import {JokeListItems} from "../components/ListeJokeComponent";
import {Joke} from "../model/Joke";
import {JokeFactory} from "../model/JokeFactory";
import {JokeStub} from "../model/JokeStub";
import {ListJokeScreen} from "./ListJokeScreen";
import React from "react";
import {HorizontalListJokeComponent} from "../components/HorizontalListJokeComponent";
import {ListAllCategories} from "../components/ListAllCategories";
const DATACUSTOM = JokeFactory.createCustomJokes(JokeStub.customJokes)
const DATASAMPLE = JokeFactory.createSampleJokes(JokeStub.sampleJokes)
//@ts-ignore
let DataGen = DATACUSTOM.concat(DATASAMPLE);
let FilterData = DataGen.filter((joke) => joke.type() !== joke.type() )
export function AccueilScreen() {
return (
<SafeAreaView style={styles.container}>
<View>
<Image source={require('../assets/logo.png')} style={styles.imgStyle}/>
<Text style={styles.title}>Chat C'est Drôle</Text>
<Text style={styles.titleAccueil}>Dernieres Blagues</Text>
</View>
<FlatList showsHorizontalScrollIndicator={false} horizontal={true}
data={DataGen}
renderItem={HorizontalListJokeComponent}
keyExtractor={(item: Joke) => item.summary()}
/>
<View style={styles.categories}>
<Text style={styles.titleAccueil} >Top Categories</Text>
<Image source={require("../assets/fire_icon.png")}/>
</View>
<FlatList showsHorizontalScrollIndicator={false} horizontal={true}
data={FilterData}
renderItem={ListAllCategories}
keyExtractor={(item: Joke) => item.summary()}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
title: {
fontSize: 24,
color: 'darksalmon',
textAlign: 'center',
fontWeight: 'bold',
marginVertical: 20,
},
titleResume: {
fontSize: 15,
fontWeight: 'bold',
marginBottom: 20,
},
container: {
flex: 1,
backgroundColor: purpleColor,
},
top: {
backgroundColor : indigo,
},
imgStyle: {
alignSelf: 'center',
margin: 5,
},
titleAccueil: {
fontSize: 20,
color: 'white',
fontWeight: 'bold',
margin: 10,
},
categories: {
flexDirection: 'row',
alignItems: 'center',
}
});

33
JokesApp/screens/AddJokeScreen.tsx
Unescape View File

@ -0,0 +1,33 @@
import React from "react";
import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
import {indigo, purpleColor} from "../Theme";
export function AddJokeScreen() {
return (
<View style={styles.font}>
<Text style={styles.text}>Ajouter une blague</Text>
<Text style={styles.text}>In Work</Text>
</View>
);
}
const styles = StyleSheet.create({
font: {
backgroundColor: indigo,
width: '100%',
height: '100%',
},
text: {
fontSize: 24,
color: 'darksalmon',
textAlign: 'center',
fontWeight: 'bold',
marginVertical: 20,
}
});

33
JokesApp/screens/SettingsScreen.tsx
Unescape View File

@ -0,0 +1,33 @@
import React from "react";
import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
import {indigo, purpleColor} from "../Theme";
export function SettingsScreen() {
return (
<View style={styles.font}>
<Text style={styles.text}>Settings Page</Text>
<Text style={styles.text}>In Work</Text>
</View>
);
}
const styles = StyleSheet.create({
font: {
backgroundColor: indigo,
width: '100%',
height: '100%',
},
text: {
fontSize: 24,
color: 'darksalmon',
textAlign: 'center',
fontWeight: 'bold',
marginVertical: 20,
}
});
Write Preview
Loading…
Cancel
Save