1 00:00:02,280 --> 00:00:03,340 Ahora para cerrar sesión. 2 00:00:04,290 --> 00:00:06,840 Necesitamos una nueva acción, que podamos despachar. 3 00:00:07,230 --> 00:00:10,140 Entonces, en el archivo desactivado, en la carpeta de acciones. 4 00:00:11,760 --> 00:00:14,020 Agregaré un nuevo creador de acción. 5 00:00:14,050 --> 00:00:21,610 ¿Realmente importa dónde agregaste? Agregué allí y lo exporté y lo llamé para cerrar sesión, lo que me parece 6 00:00:22,300 --> 00:00:23,650 un nombre apropiado. 7 00:00:26,330 --> 00:00:27,710 No espero argumentos allí. 8 00:00:28,250 --> 00:00:31,180 Sin embargo, necesito el identificador de acción para cerrar sesión. 9 00:00:31,220 --> 00:00:33,410 Entonces aquí podemos exportar. 10 00:00:36,310 --> 00:00:40,030 Cierre de sesión de concierto con la cadena de cierre de sesión. 11 00:00:41,300 --> 00:00:42,850 Y ahora te quedas ahí abajo. 12 00:00:43,270 --> 00:00:48,510 Y en este creador de acciones, que es un creador de acciones normal donde no necesito enviar ninguna solicitud HTP 13 00:00:48,520 --> 00:00:54,460 ni nada por el estilo, acabo de enviar su acción de cierre de sesión Yende donde creo este objeto de acción de cierre 14 00:00:54,460 --> 00:00:55,000 de sesión. 15 00:00:57,410 --> 00:00:58,520 Ahora podemos usar a papá. 16 00:00:59,540 --> 00:01:04,130 Y quiero poder cerrar sesión con la ayuda del sitio, dibujar en el sitio, dibujar. 17 00:01:04,190 --> 00:01:06,590 Quiero tener este botón para cerrar sesión. 18 00:01:06,860 --> 00:01:09,650 Eso significa que necesitamos hacer algo que no hemos hecho antes. 19 00:01:10,460 --> 00:01:13,210 Necesitamos agregar un nuevo botón para decidir dibujar. 20 00:01:13,370 --> 00:01:16,030 Hasta ahora, solo agregamos los botones creados automáticamente. 21 00:01:17,850 --> 00:01:21,470 Pero agregar tu propio contenido no es demasiado difícil para papá. 22 00:01:21,540 --> 00:01:24,410 Vayamos al archivo Shop Navigator donde configuramos el cajón. 23 00:01:25,080 --> 00:01:25,740 Aquí está. 24 00:01:27,560 --> 00:01:30,800 Y luego aquí, además de mis opciones de contenido. 25 00:01:31,800 --> 00:01:34,770 También puede agregar un componente de contenido aquí. 26 00:01:36,290 --> 00:01:41,630 Esto le permite agregar su propio contenido para decidir o en lugar del contenido predeterminado. 27 00:01:42,320 --> 00:01:46,790 Ahora, esto toma una función que recibe accesorios porque al final, este es un componente de reacción, que se 28 00:01:46,790 --> 00:01:47,450 agrega aquí. 29 00:01:48,850 --> 00:01:54,280 Así que obtiene accesorios y declaraciones de impuestos, soy J. S. X, y todos necesitan asegurarse de que estás 30 00:01:54,280 --> 00:01:55,300 importando reaccionar desde reaccionar. 31 00:01:55,690 --> 00:01:57,670 Y todos necesitaremos un par de otras importaciones. 32 00:01:58,960 --> 00:02:01,250 También necesitamos importar algo de reaccionar nativo. 33 00:02:01,270 --> 00:02:03,160 Y esa debería ser la vista del área segura. 34 00:02:04,580 --> 00:02:09,380 Y también quiero importar el botón de REAC nativo. 35 00:02:11,000 --> 00:02:16,550 Además, desde REACT Navigation, necesitamos importar los elementos del cajón. 36 00:02:18,060 --> 00:02:20,080 Y también muy nativa de nuevo. 37 00:02:20,340 --> 00:02:21,300 También necesito ver. 38 00:02:22,960 --> 00:02:27,970 Con eso importado, vamos a nuestro componente de contenido recién agregado. 39 00:02:28,930 --> 00:02:35,140 Y aquí ahora podemos devolver una vista con un estilo de flex one. 40 00:02:35,470 --> 00:02:36,940 Por supuesto, también puede agregar una hoja de estilo. 41 00:02:36,970 --> 00:02:38,950 Solo agregaré un estilo en línea. 42 00:02:39,130 --> 00:02:42,860 Y, por cierto, este componente podría, por supuesto, también residir en un archivo separado. 43 00:02:42,880 --> 00:02:45,850 No tiene que ser creado sobre la marcha en este otoño. 44 00:02:47,620 --> 00:02:55,870 Ahora, en esta vista, quiero tener una vista de área segura y asegurarme de agregar una inserción de fuerza igual a 45 00:02:56,710 --> 00:02:58,540 la parte superior siempre. 46 00:02:59,890 --> 00:03:01,060 Horizontal. 47 00:03:01,510 --> 00:03:03,970 Nunca, y esto solo controla cómo se presenta. 48 00:03:05,330 --> 00:03:07,620 Y en esa zona segura vista. 49 00:03:08,850 --> 00:03:16,020 Ahora debe agregar para dibujar elementos, un accesorio de paso importante para aquellos, porque estos son los elementos de cajón predeterminados 50 00:03:16,020 --> 00:03:17,400 que se representan. 51 00:03:17,450 --> 00:03:18,780 Y ese aún debería ser el caso. 52 00:03:19,200 --> 00:03:24,850 Y para que se configuren correctamente, debe pasar los accesorios, que finalmente se pasan y al reaccionar 53 00:03:24,850 --> 00:03:28,410 la navegación y mantiene todo su contacto de extracción, etc. 54 00:03:29,040 --> 00:03:31,680 Y ahora puedes agregar tu propio elemento extra de sorteo aquí. 55 00:03:32,130 --> 00:03:37,510 Y habrá este botón, el botón nativo de reacción predeterminado donde digo cerrar sesión. 56 00:03:38,510 --> 00:03:45,580 Donde quiero agregar un color de, digamos, colores, punto primario y usar en la prensa. 57 00:03:45,640 --> 00:03:48,100 Ahora quiero enviar esta acción de cierre de sesión. 58 00:03:49,640 --> 00:03:51,440 Y ahora tendremos un gran problema aquí. 59 00:03:52,220 --> 00:03:54,160 ¿Cómo podemos enviarnos desde aquí? 60 00:03:54,400 --> 00:03:56,870 Ahora, antes que nada, si guarda esto, debería ver esto. 61 00:03:56,900 --> 00:04:00,050 Entonces, si expande el dibujo, aquí está el botón para cerrar sesión. 62 00:04:00,140 --> 00:04:00,350 Derecha. 63 00:04:00,380 --> 00:04:01,220 Entonces esto funciona. 64 00:04:01,460 --> 00:04:04,250 Y, por supuesto, puedes diseñar y posicionar a quien quieras. 65 00:04:06,680 --> 00:04:08,400 Y, por cierto, solo verifique dos veces. 66 00:04:08,420 --> 00:04:11,540 También podemos ver esto en Android si iniciamos sesión allí. 67 00:04:16,210 --> 00:04:18,580 Aquí en el cajón, todos lo hacemos después de cerrar sesión. 68 00:04:20,120 --> 00:04:20,540 Botón. 69 00:04:22,280 --> 00:04:25,840 Por cierto, es posible que deseemos agregar un poco más de relleno en la parte superior. 70 00:04:27,800 --> 00:04:29,590 Pero, ¿cómo podemos despachar todo? 71 00:04:29,750 --> 00:04:32,120 Y agregaré algo de relleno adicional aquí. 72 00:04:34,060 --> 00:04:34,990 De 20. 73 00:04:38,300 --> 00:04:43,520 Porque mi vista de área segura funciona, pero apenas deja más espacio del que necesito. 74 00:04:43,790 --> 00:04:48,110 Entonces, para tener un espacio adicional, un poco de relleno no puede doler. 75 00:04:50,880 --> 00:04:51,750 Creo que eso está mejor. 76 00:04:52,260 --> 00:04:56,010 Pero, de nuevo, ¿cómo podemos asegurarnos de que podemos enviar una acción aquí? 77 00:04:57,360 --> 00:04:59,210 Bueno, este es un componente de reacción, ¿verdad? 78 00:04:59,880 --> 00:05:03,570 Entonces, al final, simplemente podemos usar el despacho aquí. 79 00:05:05,770 --> 00:05:07,060 Para que podamos importar. 80 00:05:09,150 --> 00:05:10,530 Use el despacho aquí. 81 00:05:11,620 --> 00:05:13,150 De React redux. 82 00:05:13,240 --> 00:05:19,210 Entonces, lo que hicimos antes y lo usamos aquí, porque puedes usar este gancho en cualquier componente y esto es 83 00:05:19,210 --> 00:05:20,260 solo un componente. 84 00:05:22,250 --> 00:05:24,540 Entonces, cualquier año antes de que regresemos es X. 85 00:05:24,830 --> 00:05:30,920 Puedo obtener acceso a mi función de despacho con el uso de despacho y, por ahora, cuando 86 00:05:30,920 --> 00:05:36,020 presionamos este botón, podemos llamar al despacho y despachar nuestra acción para papá. 87 00:05:36,050 --> 00:05:38,090 Por supuesto, solo necesita asegurarse de que lo está importando. 88 00:05:38,810 --> 00:05:49,330 Así que importe todo a partir de acciones desde la carpeta de la tienda, la carpeta de acciones hace todo el archivo y ahora usa todas 89 00:05:49,330 --> 00:05:52,400 las acciones para crear acciones muertas aquí. 90 00:05:52,430 --> 00:05:53,410 Toda la acción almacenada. 91 00:05:53,420 --> 00:05:54,200 Cerrar sesión. 92 00:05:54,560 --> 00:05:55,780 Cerrar sesión de esta manera. 93 00:05:57,230 --> 00:05:59,160 Y esto debería enviarse a la acción de cierre de sesión. 94 00:05:59,700 --> 00:06:05,860 Además de eso, también quiero navegar lejos para poder navegar por todos los accesorios de navegación llamados puntos. 95 00:06:06,240 --> 00:06:10,440 Eso estará disponible aquí y volverá a la pantalla fuera de aquí. 96 00:06:11,190 --> 00:06:14,580 Entonces, básicamente, esto fuera de la pantalla aquí y el navegador de cambio. 97 00:06:14,900 --> 00:06:17,050 Nuestro sorteo es parte del Shop Navigator. 98 00:06:17,250 --> 00:06:19,770 Entonces, también podemos ir a la pantalla desde allí. 99 00:06:21,540 --> 00:06:26,850 Ahora, cuando despachamos el cierre de sesión, quiero asegurarme de que en el reductor también estamos haciendo algo. 100 00:06:27,240 --> 00:06:30,660 Tenemos a nuestro creador de acciones de cierre de sesión aquí. 101 00:06:30,930 --> 00:06:35,720 Entonces, en el reductor y el usuario ofrecido, quería un nuevo caso para cerrar sesión. 102 00:06:35,750 --> 00:06:39,060 Y para papá, debes asegurarte de importar el identificador de cierre de sesión. 103 00:06:39,900 --> 00:06:41,380 Y, por supuesto, aquí es muy simple. 104 00:06:41,400 --> 00:06:46,440 Devuelvo mi estado inicial, que al final significa que el token se restablece y el usuario I. RE. se restablece 105 00:06:48,300 --> 00:06:49,510 Y ahora intentemos esto. 106 00:06:49,540 --> 00:06:56,050 Si vuelvo aquí y ahora hago clic en cerrar sesión, vuelvo a la pantalla apagada, así que eso funciona. 107 00:06:56,350 --> 00:06:58,180 También probémoslo en Android. 108 00:07:01,330 --> 00:07:03,790 Haga clic en Cerrar sesión aquí, estamos de vuelta. 109 00:07:04,480 --> 00:07:05,470 Entonces esto está funcionando. 110 00:07:06,250 --> 00:07:07,930 Ya casi llegamos con eso. 111 00:07:08,650 --> 00:07:15,640 Pero también deberíamos bloquearnos automáticamente si el token expiró porque tiene fecha de vencimiento. 112 00:07:15,820 --> 00:07:18,250 Y en este momento, no tenemos vencimiento automático.