Scribd
Upload
1 views

rapport-tp6-dev-mobile

The document outlines a React Native application that implements navigation using a stack navigator and a drawer navigator. It includes code snippets for the main App component, HomeScreen, and PortfolioScreen, demonstrating how to navigate between screens and pass data. Additionally, it shows how to integrate a drawer for navigation to different sections of the app, including an FAQ screen.

Uploaded by

xojori2149
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

rapport-tp6-dev-mobile

The document outlines a React Native application that implements navigation using a stack navigator and a drawer navigator. It includes code snippets for the main App component, HomeScreen, and PortfolioScreen, demonstrating how to navigate between screens and pass data. Additionally, it shows how to integrate a drawer for navigation to different sections of the app, including an FAQ screen.

Uploaded by

xojori2149
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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>
);
}

You might also like