1 00:00:02,170 --> 00:00:04,210 Entonces trabajamos con el navegador de pila. 2 00:00:04,210 --> 00:00:06,080 Ahora qué hay del sorteo. 3 00:00:06,100 --> 00:00:08,950 La lógica es exactamente la misma. 4 00:00:08,950 --> 00:00:18,780 Creamos nuestro año de navegador de sorteo de la tienda llamando a crear navegador de sorteo y al igual que el navegador de pila. 5 00:00:18,780 --> 00:00:21,470 Esta función no quiere argumentos. 6 00:00:21,480 --> 00:00:28,980 En su lugar, configuraremos nuestra navegación de dibujo en un enfoque basado en componentes o papá, crearé un navegador de la tienda aquí 7 00:00:28,980 --> 00:00:31,500 y este será un componente de reacción. 8 00:00:31,500 --> 00:00:33,850 De nuevo, podría tener eso en un archivo separado. 9 00:00:33,870 --> 00:00:42,210 Lo guardaré todo en un solo archivo para tenerlo al lado del código antiguo y en su devolución volveremos a dibujar 10 00:00:42,210 --> 00:00:44,160 el navegador de puntos. 11 00:00:44,160 --> 00:00:48,170 La misma lógica que antes No importa que sea un empate. 12 00:00:48,210 --> 00:00:53,460 Y allí ahora tenemos dos pantallas diferentes que se pueden cargar a través del navegador 13 00:00:53,460 --> 00:00:59,880 y la navegación de reacción asegurará automáticamente que se cree un navegador que podamos abrirlo con el mismo 14 00:00:59,880 --> 00:01:03,360 código que usamos antes, no tendrá que ajustar eso. 15 00:01:03,360 --> 00:01:10,920 Así que aquí ahora tenemos nuestra pantalla de puntos de navegador de dibujo y justicia antes de darle un nombre a esa pantalla. 16 00:01:10,920 --> 00:01:13,190 Aquí tenemos dos productos, por ejemplo. 17 00:01:13,440 --> 00:01:17,580 Y ese nombre se usará automáticamente dentro del navegador de dibujo. 18 00:01:17,580 --> 00:01:24,110 Aunque también podría sobrescribir todo eso si lo desea y necesitamos un componente que se carga cuando hacemos clic 19 00:01:24,110 --> 00:01:26,450 en ese enlace en el navegador. 20 00:01:26,450 --> 00:01:29,270 Y aquí sigue siendo el navegador del producto. 21 00:01:29,330 --> 00:01:36,660 Entonces, al igual que antes, podemos usar nuestros navegadores de pila a pesar de que ahora están usando este enfoque 22 00:01:36,660 --> 00:01:43,770 basado en componentes como componentes que deberían crearse como parte de otro navegador en este caso como parte del 23 00:01:43,770 --> 00:01:44,920 navegador de dibujo. 24 00:01:44,940 --> 00:01:51,380 Todavía podemos señalar a nuestros navegadores de pila como componentes aquí porque son componentes este año. 25 00:01:51,390 --> 00:01:55,710 Este es un componente y lo mismo es cierto para todos nuestros navegadores. 26 00:01:55,710 --> 00:02:02,130 Creamos aquí que todos son componentes de reacción que contienen sus componentes específicos de lógica de navegación específicos 27 00:02:03,130 --> 00:02:09,670 y los componentes generales como el navegador de productos aquí se pueden usar en un navegador de sorteo, así 28 00:02:09,670 --> 00:02:18,940 que replicaré esto dos veces para que también podamos agregar nuestros pedidos aquí con el navegador de pedidos y el administrador aquí con el navegador de administrador 29 00:02:19,450 --> 00:02:25,870 y asegúrese de que no tenga errores en sus nombres porque los estamos usando en toda la aplicación 30 00:02:25,870 --> 00:02:28,820 y esa lógica no necesitará ser ajustada. 31 00:02:28,840 --> 00:02:34,080 Entonces, si confunde los nombres aquí, otras partes de la aplicación no funcionarán bien. 32 00:02:34,120 --> 00:02:39,710 Así que ahora tenemos este navegador de dibujo configurado y ahora qué pasa con la configuración. 33 00:02:39,730 --> 00:02:42,030 Ahora hay dos cosas que debemos considerar. 34 00:02:42,100 --> 00:02:46,560 Por un lado, tenemos que configurar aquí el contenido del sorteo. 35 00:02:46,570 --> 00:02:52,660 Y segundo, queremos configurar nuestras diferentes pantallas, como el navegador del producto o el navegador del pedido, para 36 00:02:52,750 --> 00:02:55,510 tener sus propios iconos en el cajón. 37 00:02:55,510 --> 00:02:57,100 Bueno, comencemos con los iconos. 38 00:02:57,160 --> 00:03:02,230 Anteriormente configuramos que puedo directamente en la configuración del navegador de pila que 39 00:03:02,230 --> 00:03:06,930 queríamos usar en un sorteo ahora con el enfoque basado en componentes. 40 00:03:06,930 --> 00:03:08,420 Ya no hacemos eso. 41 00:03:08,430 --> 00:03:17,450 En cambio, podemos tomar esta parte aquí, en realidad somos todo este objeto que configuramos previamente en el navegador 42 00:03:17,450 --> 00:03:21,440 de la pila y bajar a nuestro sorteo. 43 00:03:21,510 --> 00:03:23,870 Y ahora aquí en esta pantalla a la que pertenece. 44 00:03:23,870 --> 00:03:26,180 Entonces, en este caso, pertenece al administrador Navigator. 45 00:03:26,180 --> 00:03:34,630 Entonces, aquí en la pantalla de administración, pasamos nuevamente nuestras opciones, tal como lo hicimos un segundo, voy al navegador de la pila. 46 00:03:34,790 --> 00:03:42,230 Entonces, aquí pasamos las opciones para esta pantalla y este podría ser un componente normal o, como es en este caso, 47 00:03:42,230 --> 00:03:48,760 un componente con nuestra lógica de navegación de pila y dos opciones, pasamos un objeto y allí podemos 48 00:03:48,770 --> 00:03:51,170 reutilizar ese objeto que usamos antes. 49 00:03:51,200 --> 00:03:56,060 Entonces, un objeto con un dibujo que puedo marcar donde tenemos nuestro ojo viene y así sucesivamente. 50 00:03:56,060 --> 00:04:04,140 Así que todo esto funciona bien antes de un pequeño ajuste, sin embargo, ahora tenemos accesorios aquí también alimentados por la navegación de 51 00:04:04,140 --> 00:04:12,660 reacción y estos accesorios tendrán una clave de color en lugar de dibujar color de tinte activo de configuración y el color siempre será el 52 00:04:12,800 --> 00:04:18,470 color correcto porque la navegación de reacción detrás del las escenas controlarán dónde hace esto 53 00:04:18,480 --> 00:04:24,200 o no a la pantalla actualmente activa y ajustará los valores almacenados en ese accesorio de color. 54 00:04:24,240 --> 00:04:26,920 Ya he resaltado el color resaltado ya conocido. 55 00:04:27,000 --> 00:04:33,250 Así que es un pequeño ajuste que tenemos que hacer aquí bien y con eso podemos copiar 56 00:04:33,250 --> 00:04:39,250 la lógica de los otros navegadores, así como del navegador de la orden, tomemos este 57 00:04:39,250 --> 00:04:48,100 objeto que teníamos y sus opciones de navegación se reducen al sorteo de las órdenes. la pantalla agrega el pase de tecla de opciones y 58 00:04:48,100 --> 00:04:57,170 es un objeto y comenta que está de vuelta e importante, ahora obtenemos accesorios que tendrán esa tecla de color como esta y, por último, 59 00:04:57,380 --> 00:05:03,470 pero no menos importante, también lo haremos para la pantalla de productos para el navegador de productos. 60 00:05:03,470 --> 00:05:09,200 Aquí tenemos este objeto, vamos a agarrarlo, vamos a dibujar nuestro navegador y 61 00:05:12,050 --> 00:05:18,440 aquí está la configuración de la pantalla de nuestro producto, la tecla de opciones aquí. 62 00:05:18,570 --> 00:05:23,520 Lo pasé y lo ajusté como lo acabo de mostrar. 63 00:05:23,520 --> 00:05:27,840 Así que ahora tenemos nuestra configuración específica de pantalla aquí. 64 00:05:27,840 --> 00:05:35,700 Podría decir ahora qué pasa con el dibujo general porque anteriormente en la aplicación con la antigua 65 00:05:35,740 --> 00:05:45,450 navegación de reacción en la que realmente teníamos nuestro dibujo y configuramos el color de tinte activo y también el contenido 66 00:05:45,450 --> 00:05:46,640 del dibujo. 67 00:05:46,680 --> 00:05:50,160 Bueno, aún puedes hacerlo con ese nuevo enfoque. 68 00:05:50,340 --> 00:05:58,640 Vamos a nuestro navegador de dibujo, de modo que configuramos el navegador general y lo configuramos a través de accesorios como 69 00:05:58,640 --> 00:05:59,310 antes. 70 00:05:59,340 --> 00:06:06,030 Se trata de componentes y accesorios, así que aquí ahora, sin embargo, tenemos un nombre diferente, ya no 71 00:06:06,030 --> 00:06:09,960 tenemos opciones de contenido y un componente de contenido. 72 00:06:10,020 --> 00:06:11,910 Y puedes encontrar esto en los documentos oficiales. 73 00:06:11,970 --> 00:06:17,190 Ahora tenemos contenido de dibujo y opciones de contenido de dibujo. 74 00:06:17,190 --> 00:06:20,540 Sin embargo, los valores son exactamente los mismos al final. 75 00:06:20,700 --> 00:06:24,750 Por lo tanto, podemos tomar nuestro objeto de opciones de 76 00:06:28,600 --> 00:06:37,820 contenido aquí y en el pasado para dibujar aquí las opciones de contenido y comentarlo dentro y hacia adelante para dibujar un contenido. 77 00:06:37,900 --> 00:06:40,180 También es casi lo mismo. 78 00:06:40,180 --> 00:06:42,760 Acabamos de envolver este componente 79 00:06:51,270 --> 00:06:52,880 aquí hasta aquí. 80 00:06:53,010 --> 00:06:53,970 Copia 81 00:06:57,260 --> 00:07:03,070 esto y pasa esto aquí al contenido del dibujo y comenta esto. 82 00:07:03,080 --> 00:07:07,400 Sin embargo, ahora dos cosas importantes que usan este parche no están permitidas aquí. 83 00:07:07,400 --> 00:07:09,490 Deberías hacer esto fuera de aquí. 84 00:07:09,500 --> 00:07:15,980 Entonces, por ejemplo, aquí en el navegador de la tienda asintió con la cabeza es un componente anidado. 85 00:07:15,980 --> 00:07:27,910 Además, ya no es dibujar elementos, sino dibujar una lista de elementos que también debemos importar en la parte superior del dibujo 86 00:07:32,940 --> 00:07:35,730 de barra de reactivación. 87 00:07:35,730 --> 00:07:37,890 Así que aquí importamos la lista de elementos de dibujo 88 00:07:40,580 --> 00:07:41,030 con ella. 89 00:07:41,030 --> 00:07:49,630 Sin embargo, si me desplazo hacia abajo, esto debería estar funcionando nuevamente y ahora debería ser nuestro sorteo de trabajo, así que 90 00:07:49,630 --> 00:07:56,830 tenemos el navegador de la tienda, tenemos todos estos navegadores de pila, lo que queda ahora es ese 91 00:07:56,830 --> 00:08:05,440 interruptor de navegador que básicamente muestra nuestra pantalla de inicio o usted pantalla o la pantalla de la tienda o hacer sus respectivas 92 00:08:05,440 --> 00:08:07,450 pilas de navegación, debo decir. 93 00:08:07,750 --> 00:08:09,940 Bueno, en eso trabajaremos a continuación.