Lab6 : Navigation, Passage de données et
Affichage dynamique
Folder structure:
App.jsx file : in the app.jsx file we create our stack navigator and use it to
navigate between pages
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import HomeScreen from './screens/HomeScreen';
import PhotoScreen from './screens/PhotoScreen';
import PortfolioScreen from './screens/PortfolioScreen';
function App(): React.JSX.Element {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="PhotoScreen" component={PhotoScreen} />
<Stack.Screen name="PortfolioScreen"
component={PortfolioScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
HomeScreen.tsx :
import {View, Text, Button, TouchableHighlight, Image} from 'react-
native';
import React from 'react';
import {FlatList} from 'react-native-gesture-handler';
import {DATA} from '../data/data';
const HomeScreen = ({navigation}) => {
return (
<View>
<Text>Home Screen</Text>
<FlatList
data={DATA}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
return (
<TouchableHighlight
onPress={() => {
navigation.navigate('PortfolioScreen', {profile:
item});
}}>
<View style={{marginVertical: 20, paddingHorizontal:
10}}>
<Text
style={{fontSize: 24, textAlign: 'center',
marginBottom: 10}}>
{item.name}
</Text>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
backgroundColor: '#f0f0f0',
borderRadius: 10,
}}>
<Image
source={{uri: item.img}}
style={{width: 300, height: 300, borderRadius: 10}}
/>
</View>
<Text
style={{fontSize: 20, textAlign: 'center', marginTop:
10}}>
{item.country}
</Text>
</View>
</TouchableHighlight>
);
}}
/>
</View>
);
};
export default HomeScreen;
Result:
PortfolioScreen.tsx file:
import {View, Text, Image, Button} from 'react-native';
import React from 'react';
const PortfolioScreen = ({route, navigation}) => {
const {profile} = route.params;
console.log('Hello from React!');
console.log('Data item:', profile);
return (
<View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
padding: 10,
backgroundColor: '#f0f0f0',
borderRadius: 10,
}}>
<Image
source={{uri: profile.img}}
style={{width: 300, height: 300, borderRadius: 10}}
/>
</View>
<Text>name: {profile.name} </Text>
<Text>description: {profile.desc} </Text>
<Text>country: {profile.country} </Text>
<Text>Total Image: {profile.totalImage} </Text>
<Button
onPress={() => {
navigation.navigate('PhotoScreen', {profile: profile.img});
}}
title="Go to Image
"></Button>
</View>
);
};
export default PortfolioScreen;
result:
Adding Drawer:
import React from "react";
import "react-native-gesture-handler";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-
stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
// Screens
import HomeScreen from "./screens/HomeScreen";
import PhotoScreen from "./screens/PhotoScreen";
import PortfolioScreen from "./screens/PortfolioScreen";
import FAQScreen from "./screens/FAQScreen";
const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
// Stack for Home-related screens
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="PhotoScreen" component={PhotoScreen} />
<Stack.Screen name="PortfolioScreen" component={PortfolioScreen}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="HomeStack">
<Drawer.Screen
name="HomeStack"
component={HomeStack}
options={{ title: "Home" }}
/>
<Drawer.Screen
name="FAQ"
component={FAQScreen}
options={{ title: "FAQ" }}
/>
</Drawer.Navigator>
</NavigationContainer>
</GestureHandlerRootView>
);
}
