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