Adición de la navegación a las pantallas de reserva de materiales

Navegacion.js

@@ -4,6 +4,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Password from './Password';
 import Password from './Password';
 import TabBar from './TabBar';
 import TabBar from './TabBar';
 import App from './App';
 import App from './App';
+import ListaMateriales from './materialesLista';
+import ListaMaterialesSis from './materialesListaSis';
 import DescripcionGuardia from './DescripcionGuardia';
 import DescripcionGuardia from './DescripcionGuardia';
 
 
 const Stack = createNativeStackNavigator();
 const Stack = createNativeStackNavigator();
@@ -29,6 +31,23 @@ function Navegacion() {
             <Stack.Screen name="TabBar" component={TabBar} options={{"headerShown": false}}/>
             <Stack.Screen name="TabBar" component={TabBar} options={{"headerShown": false}}/>
             {/* Pantalla que permite modificar la contraseña */}
             {/* Pantalla que permite modificar la contraseña */}
             <Stack.Screen name="Contraseña" component={Password} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
             <Stack.Screen name="Contraseña" component={Password} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
+            {/* Pantalla con el listado de materiales a reservar */}
+            <Stack.Screen
+                name="Materiales"
+                component={ListaMateriales}
+                options = {({route}) => ({
+                    title: route.params.nombreListaMat,
+                    headerStyle: { backgroundColor: '#7D9BFF' },
+                    headerTintColor: 'white'
+            })}/>
+            {/* Pantalla con el listado de materiales del sistema */}
+            <Stack.Screen
+                name="Reserva de material"
+                component={ListaMaterialesSis}
+                options = {{
+                    headerStyle: { backgroundColor: '#7D9BFF' },
+                    headerTintColor: 'white'
+            }}/>
             {/* Pantalla que mantiene la descripcion de las guardias del usuario */}
             {/* Pantalla que mantiene la descripcion de las guardias del usuario */}
             <Stack.Screen name="Guardia" component={DescripcionGuardia} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
             <Stack.Screen name="Guardia" component={DescripcionGuardia} options={{ headerTintColor:"white", headerStyle:{ backgroundColor: '#7D9BFF' }}}/>
         </Stack.Navigator>
         </Stack.Navigator>