• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

npm install @react-navigation/native @react-navigation/native-stack

Expo használata esetén:

npx expo install react-native-screens react-native-safe-area-context

Tiszta React Native esetén:

npm install react-native-screens react-native-safe-area-context

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

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

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

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

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:

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

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