< Navigáció

Expo - React Navigation

Szerző: Sallai András

Copyright © 2024, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Native Stack

Projekt létrehozása

npx create-expo-app app01

cd app01

npx expo install react-dom react-native-web @expo/webpack-config

Probléma fixálása

{ "expo": { "web": { "bundler": "metro" } } }

npx expo install @expo/metro-runtime

Native Stack telepítés

npm install @react-navigation/native-stack

Minőségbiztosítás példa

import { Button, View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Minőség</Text> <Button title="Kezdés" onPress={() => navigation.navigate('Subject')} /> </View> ); } function SubjectScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="Tanárok" onPress={() => navigation.navigate('Teacher')} /> <Button title="Vissza" onPress={() => navigation.goBack()} /> </View> ); } function TeacherScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="Kérdések" onPress={() => navigation.navigate('Questions')} /> <Button title="Vissza" onPress={() => navigation.goBack()} /> </View> ); } function QuestionsScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Button title="Vissza" onPress={() => navigation.goBack()} /> </View> ); } const Stack = createNativeStackNavigator(); function QualityStack() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Teacher" component={TeacherScreen} /> <Stack.Screen name="Subject" component={SubjectScreen} /> <Stack.Screen name="Questions" component={QuestionsScreen} /> </Stack.Navigator> ); } export default function App() { return ( <NavigationContainer> <QualityStack /> </NavigationContainer> ); }