corentin.richard
/
TP_ReactNative
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request '🚀 second essaie de push tout mon code sur le depot (à tester) 🧪' (#1) from DevPF into master

Browse Source 
Reviewed-on: #1
pull/2/head
Corentin RICHARD 2 years ago
parent 1f5fb21691 ec588e3186
commit f1b34cd3f2
9 changed files with 272 additions and 14 deletions
Show Stats Download Patch File Download Diff File

27
App.tsx
Unescape View File

@ -1,20 +1,19 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useState } from "react";
import Navigation from './navigation/Navigation';
import {
SafeAreaView,
SafeAreaProvider,
} from 'react-native-safe-area-context';
export default function App() {
//safearea
//mettre le navigateur ayant le princ
return (
<View style={styles.container}>
<Text>Vroum Vroum i'm in my mom's car </Text>
<StatusBar style="auto" />
</View>
<SafeAreaProvider>
<Navigation/>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

10
components/TabBarIcon.tsx
Unescape View File

@ -0,0 +1,10 @@
import { FontAwesome } from '@expo/vector-icons';
export default function TabBarIcon(props: {
name: React.ComponentProps<typeof FontAwesome>['name'];
color: string;
}) {
return <FontAwesome size={30} {...props} />;
}

40
components/mainComponent.tsx
Unescape View File

@ -0,0 +1,40 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useState } from "react";
export default function Main(props : mainProps){
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<View style={styles.border}>
<Text>Maman, prend la caméra ! !</Text>
<StatusBar style="auto" />
<Text>{count}</Text>
<Button onPress={()=> setCount(count+1)} title="+1"/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
borderColor : "#ff00ff",
},
border: {
flex: 1,
backgroundColor: '#ff0000',
maxHeight : 100,
borderWidth : 15,
borderRadius : 15,
borderColor : '#00ffaa',
alignItems: 'center',
justifyContent: 'center',
}
});

21
navigation/ListNavigator.tsx
Unescape View File

@ -0,0 +1,21 @@
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import ListScreen from '../screens/ListScreen';
import ListFav from '../screens/ListFav';
export default function ListNavigator() {
const Stack = createStackNavigator();
return (
<Stack.Navigator initialRouteName="List">
<Stack.Screen name="List" component={ListScreen}/>
<Stack.Screen name="ListFav" component={ListFav}/>
</Stack.Navigator>
)
}

41
navigation/Navigation.tsx
Unescape View File

@ -0,0 +1,41 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import React, { useState } from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/HomeScreen';
import ListScreen from '../screens/ListScreen';
import ListFav from '../screens/ListFav';
import TabBarIcon from '../components/TabBarIcon';
export default function Navigation() {
const BottomTabNavigator = createBottomTabNavigator();
return (
<NavigationContainer>
<BottomTabNavigator.Navigator initialRouteName="Home">
<BottomTabNavigator.Screen name="List" component={ListScreen}
options={{
title: 'List',
tabBarIcon: ({color}) => <TabBarIcon name="list" color={color}/>,
}}/>
<BottomTabNavigator.Screen name="Home" component={HomeScreen}
options={{
title: 'Home',
tabBarIcon: ({color}) => <TabBarIcon name="home" color={color}/>,
}}/>
<BottomTabNavigator.Screen name="ListFav" component={ListFav}
options={{
title: 'ListFav',
tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
}}/>
</BottomTabNavigator.Navigator>
</NavigationContainer>
)
}

23
navigation/StackNavigation.tsx
Unescape View File

@ -0,0 +1,23 @@
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import ListScreen from '../screens/ListScreen';
import ListFav from '../screens/ListFav';
export default function StackNavigation() {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="ListScreen" component={ListScreen}/>
<Stack.Screen name="ListFav" component={ListFav}/>
</Stack.Navigator>
</NavigationContainer>
)
}

51
screens/HomeScreen.tsx
Unescape View File

@ -0,0 +1,51 @@
import { StyleSheet, Text, View, Button, TouchableNativeFeedback } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigation from '../navigation/StackNavigation'
import { Colors } from 'react-native/Libraries/NewAppScreen';
export default function HomeScreen() {
return (
// <View>
//<TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
//<Text>Click me !</Text>
//</TouchableNativeFeedback>
<View style={styles.container}>
<View style={styles.centered}>
<Text style={styles.title}>Mes super Nounours !</Text>
</View>
<Text>Mon super texte ...</Text>
{/* <MyCustomComponent /> */}
<View style={styles.MidArea}>
<Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
</View>
</View>
//</View>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "darksalmon",
alignItems: "center"
},
centered: {
alignItems: "center"
},
title: {
fontSize: 20
},
MidArea: {
justifyContent: "center",
backgroundColor: "white",
paddingTop: 50,
paddingBottom: 50,
margin: 40,
},
textStyle: {
textAlign: "center",
fontSize: 20,
}
});

31
screens/ListFav.tsx
Unescape View File

@ -0,0 +1,31 @@
import { StyleSheet, Text, View, Button } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React, { useState } from "react";
export default function Main(){
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
<StatusBar style="auto" />
<Text>{count}</Text>
<Button onPress={()=> setCount(count+1)} title="+1"/>
<Button onPress={()=> setCount(count+2)} title="+2"/>
<Button onPress={()=> setCount(count+10)} title="+10"/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
borderColor : "#cacaca",
},
});

42
screens/ListScreen.tsx
Unescape View File

@ -0,0 +1,42 @@
import { StyleSheet, Text, View, Button } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React, { useState } from "react";
export default function Main(){
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<View style={styles.border}>
<Text>Maman, prend la caméra ! !</Text>
<StatusBar style="auto" />
<Text>{count}</Text>
<Button onPress={()=> setCount(count+1)} title="+1"/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
borderColor : "#ff00ff",
},
border: {
flex: 1,
backgroundColor: '#ff0000',
maxHeight : 100,
borderWidth : 15,
borderRadius : 15,
borderColor : '#00ffaa',
alignItems: 'center',
justifyContent: 'center',
}
});
Write Preview
Loading…
Cancel
Save