Navegar entre ventanas (Navigation)

  • Autor de la entrada:
  • Categoría de la entrada:React Native

los paquetes que hay que instalar son:
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-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

import React from ‘react’;
import { StyleSheet, Text, View, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
navigation.setOptions({
headerRight: () => (
<Button
title=’Save’
onPress={() => {
//save the changes
navigation.replace(‘Home’);
}}
/>
)
});
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<Text>Inicio</Text>
<Button
title=’Ir a la ventana de configuracion’
onPress={() => navigation.navigate(‘Settings’)}
/>
</View>
);
};

const SettingsScreen = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
<Text style={{ color: ‘green’}}>
SettingsScreen
</Text>
<Button title=’Regresar al inicio’ onPress={() => navigation.goBack()} />
</View>
);
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{ title: ‘My Home Screen’ }}
name=’Home’
component={HomeScreen}
/>
<Stack.Screen name=’Settings’ component={SettingsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
justifyContent: ‘center’
}
});