Stack Navigator

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>

Aviso Legal | Política de privacidad