Los paquetes necesarios son
npm install react-navigation –save
npm install react-navigation-stack –save
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

				
					import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import LoginScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';

class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}

const AppNavigator = createStackNavigator({
Home: {
screen: LoginScreen
},
About: {
screen: AboutScreen
}
});

export default createAppContainer(AppNavigator);
				
			

Luegos creamos las vistas

				
					HomeScreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'

export default class Aboutscreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home</Text>
<Button
onPress={() => this.props.navigation.navigate('About')}
title="About"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
)
}
}

AboutScreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation'

export default class Aboutscreen extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>About Screen</Text>
</View>
)
}
}
				
			

Deja un comentario

Tu dirección de correo electrónico no será publicada.