[[oktatas:telefon:react_native:navigacio|< Navigáció]]

====== Navigáció függvényekkel ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Verem alapú navigáció =====
===== Modul telepítése =====

<code>
npm install @react-navigation/native @react-navigation/native-stack
</code>

Expo használata esetén:
<code>
npx expo install react-native-screens react-native-safe-area-context
</code>


Tiszta React Native esetén:

<code>
npm install react-native-screens react-native-safe-area-context
</code>


==== Könyvtárszerkezet ====

<code>
app01/
  |-assets/
  |-comps/
  |  |-HomeScreen.js
  |  `-ProfileScreen.js
  |-App.js

</code>

==== Forráskódok ====

<code javascript App.js>
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './comps/HomeScreen';
import ProfileScreen from './comps/ProfileScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>

        <Stack.Screen 
        name="Home"
        component={HomeScreen}
        options={{title: 'Üdvözlet'}}
        />

        <Stack.Screen 
        name="Profile"
        component={ProfileScreen}
        />

      </Stack.Navigator>
    </NavigationContainer>
  );
}
</code>


<code javascript comps/HomeScreen.js>
import { Button } from "react-native";
import { View, Text } from "react-native-web";

export default function HomeScreen({navigation}) {
    return (
        <View>
            <Text>Home</Text>
            <Button 
            title='Kapcsolása a Profile-ra'
            onPress={() =>
                navigation.navigate('Profile', {name: 'Valaki'})
            }
            />
        </View>
    );
}
</code>


<code javascript comps/ProfileScreen.js>
import { View, Text } from "react-native-web";

export default function ProfileScreen({navigation, route}) {
    return (
        <View>
            <Text>Profile</Text>
            <Text>{route.params.name}</Text>
        </View>
    );
}
</code>

Ha bezárjuk a Profile képernyőt hibaüzenetet kapunk webes nézetben,
mivel webes nézetben nem áll rendelkezésre animáció. Webes nézetben 
ezért hagyjuk figyelmen kívül. Az üzenet így kezdődik:

<code>
Animated: `useNativeDriver` is not supported because the native animated 
module is missing. Falling back to JS-based animation. ...
</code>

==== Függvény ====

  * https://reactnavigation.org/docs/navigation-container/ (2023)