El stack es el contenedor donde se precargan las pantallas.
Las pantallas son los screen.
npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
./App.js
import 'react-native-gesture-handler';
import React from 'react';
import Navigation from './src/navigation';
export default () => <Navigation />
./src/navigation/index.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Main from './stacks/index'
export default ()=>
<NavigationContainer>
<Main/>
</NavigationContainer>
./src/navigation/stacks/index.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import test from '../../screens/home';
const Stack = createStackNavigator();
export default ()=> {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={test} />
<Stack.Screen name="page2" component={test} />
</Stack.Navigator>
);
}
./src/screens/home/index.js
import React from 'react'
import { View, Text, Button } from "react-native";
export default ({navigation, route})=>
<View>
<Text>screen {route.name}</Text>
<Button title="Change Screen" onPress={ () =>
navigation.navigate('page2')
}></Button>
</View>