1 00:00:02,520 --> 00:00:08,550 Antes de continuar con el proceso de compilación o publicación y, por lo tanto, llevarlo a las tiendas 2 00:00:08,550 --> 00:00:10,300 de aplicaciones, continuemos configurándolo. 3 00:00:10,300 --> 00:00:15,330 Ahora, por ejemplo, hay algunos espacios en blanco aquí, como la descripción que falta, que 4 00:00:15,330 --> 00:00:16,440 puede agregar agregando 5 00:00:16,440 --> 00:00:21,540 una clave de descripción aquí con texto y esa sería la descripción que se muestra aquí. 6 00:00:21,660 --> 00:00:24,640 Importante, esa no es una descripción que aparece en 7 00:00:24,640 --> 00:00:28,950 las tiendas de aplicaciones, en realidad es solo una descripción que aparece aquí y 8 00:00:28,950 --> 00:00:34,200 puede obtener más información sobre la descripción, todas las demás claves que puede configurar aquí en esta página. 9 00:00:34,230 --> 00:00:37,110 Hay muchas configuraciones que puedes configurar después de todo. 10 00:00:37,110 --> 00:00:42,780 Ahora lo que me interesa en este momento es el ícono y la parte de la pantalla de inicio porque ese es el 11 00:00:42,780 --> 00:00:44,610 ícono que la gente verá en la 12 00:00:44,610 --> 00:00:49,920 pantalla de inicio, por supuesto que todavía no, porque en este momento no estamos publicando las aplicaciones en la App Store, 13 00:00:50,700 --> 00:00:51,670 pero eso cambiará 14 00:00:51,690 --> 00:00:54,140 y la pantalla de inicio, bueno, eso es lo 15 00:00:54,330 --> 00:00:58,620 que ven los usuarios cuando se carga nuestra aplicación y ambos son elementos que normalmente desea personalizar. 16 00:00:58,680 --> 00:01:05,810 Ahora expo le ofrece un ícono y una pantalla de inicio listos para usar, pero ambos son solo marcadores de posición vacíos, correcto, por 17 00:01:05,820 --> 00:01:08,720 lo que no es demasiado sorprendente, en su lugar, 18 00:01:08,730 --> 00:01:12,590 queremos proporcionar nuestro propio ícono, nuestra propia imagen de pantalla de inicio aquí. 19 00:01:12,600 --> 00:01:17,850 Ahora es realmente flexible con respecto a lo que proporciona aquí, pero en general, es 20 00:01:17,850 --> 00:01:22,840 una buena idea proporcionar un ícono con una resolución de 1024 x 1024, de 21 00:01:22,890 --> 00:01:30,720 modo que un ícono cuadrado como entrada y para la pantalla de presentación, pueda construir una pantalla de presentación como descrito en 22 00:01:30,720 --> 00:01:35,550 los documentos oficiales donde puede obtener más información sobre cómo podría crear una 23 00:01:35,550 --> 00:01:38,520 pantalla de bienvenida, cómo podría estructurarla, etc. 24 00:01:38,520 --> 00:01:45,600 Ahora preparé algo para usted que puede usar para seguir ahora y que no debe usar para una implementación real porque 25 00:01:45,660 --> 00:01:51,930 estos activos son solo para este curso, no para que usted use en su aplicación que planea implementar 26 00:01:51,930 --> 00:01:57,870 y para lo que adjunto encuentre Los iconos. archivo zip. 27 00:01:58,000 --> 00:02:04,270 Ahora, si descomprimes esto, allí encontrarás lugares. archivo png que, por supuesto, puede arrastrar y soltar en 28 00:02:04,270 --> 00:02:05,500 la carpeta de 29 00:02:05,500 --> 00:02:08,840 activos, también puede eliminar el icono. archivo png allí si quieres. 30 00:02:08,890 --> 00:02:15,460 También puedes eliminar el splash. archivo png porque en esta carpeta adjunta, también 31 00:02:15,580 --> 00:02:19,720 encontrará este icono de bienvenida. archivo png que, por supuesto, también puede arrastrar y soltar aquí. 32 00:02:19,720 --> 00:02:24,030 Ahora, estos son solo algunos iconos que creé que podemos usar ahora y 33 00:02:24,280 --> 00:02:29,590 de regreso en la aplicación. archivo json, ahora podemos apuntar a los iconos personalizados. Importante, debe proporcionar archivos 34 00:02:29,600 --> 00:02:31,720 png como lo estoy haciendo aquí. 35 00:02:31,720 --> 00:02:38,170 Entonces, ahora para el ícono, podemos apuntar a activos / lugares. png y para la presentación, podemos 36 00:02:38,260 --> 00:02:46,840 señalar que assets / splash_icon. png. Ahora, como color de fondo, podemos usar un color negro 37 00:02:46,840 --> 00:02:47,940 oscuro como el 38 00:02:48,010 --> 00:02:55,180 código hexadecimal # 171717, este debería ser un color de código hexadecimal como este y el modo de cambio de tamaño aquí se puede 39 00:02:55,180 --> 00:03:00,610 configurar para contener o cubrir, la cubierta básicamente estirará el ícono para tomar el ancho y la altura 40 00:03:00,610 --> 00:03:06,190 disponibles, el contenido mantendrá el tamaño del icono, lo centrará y tendrá ese color de fondo detrás del icono. 41 00:03:06,190 --> 00:03:10,090 Ahora, si hacemos eso, ya podemos ver el resultado de esto si 42 00:03:10,240 --> 00:03:18,730 simplemente iniciamos esto, por lo que el servidor como lo hicimos muchas veces en este curso o expo se inicia y luego lo lanzamos en un 43 00:03:18,730 --> 00:03:26,010 emulador, Android o iOS nuevamente como yo Lo estoy haciendo aquí. Ahora esto lo lanza allí y ahora ves, esta es la pantalla 44 00:03:26,200 --> 00:03:31,510 de inicio que ya está tomando una nueva, con la imagen allí que es nuestra grande, pero eso es 45 00:03:31,520 --> 00:03:35,920 a propósito para que podamos verlo claramente y el color de fondo que es ligeramente diferente. 46 00:03:35,920 --> 00:03:40,180 que también tienes la oportunidad de ver eso, por supuesto, puedes elegir el mismo color 47 00:03:40,180 --> 00:03:42,480 para tener una pantalla de bienvenida perfecta. 48 00:03:42,520 --> 00:03:45,510 Así que está funcionando y esperemos a que termine 49 00:03:45,710 --> 00:03:50,160 y aquí está la aplicación ejecutándose y ahora verá su icono aquí también 50 00:03:50,170 --> 00:03:55,240 si ingresa al conmutador de tareas. Verán que no se ve tan bien con el fondo, 51 00:03:55,240 --> 00:03:56,720 pero eso es algo que podemos 52 00:03:56,740 --> 00:04:02,740 mejorar, pero aquí está el ícono en general, por lo que está funcionando, vemos tanto la pantalla de inicio como el ícono, y en 53 00:04:02,770 --> 00:04:05,610 iOS sería lo mismo. Ahora, como puedes ver, 54 00:04:05,610 --> 00:04:08,230 el icono no se ve tan bien en Android. 55 00:04:08,250 --> 00:04:13,260 La razón de esto es que Android, dependiendo de la versión de Android que esté 56 00:04:13,650 --> 00:04:20,310 ejecutando en su dispositivo, usa diferentes iconos, las versiones más recientes de Android usan estos llamados iconos adaptativos, que son estos 57 00:04:20,310 --> 00:04:25,980 iconos redondeados donde tiene su icono en el medio y luego algo de color de fondo o 58 00:04:25,980 --> 00:04:28,060 una imagen de fondo incluso 59 00:04:28,110 --> 00:04:30,900 detrás de ellos, las versiones anteriores usarían iconos cuadrados. 60 00:04:30,900 --> 00:04:38,930 Ahora puede atender esto proporcionando una configuración más detallada para Android y también 61 00:04:39,000 --> 00:04:45,770 para iOS si lo desea. En lugar de tener esta clave de icono general aquí, puede configurar configuraciones específicas de la 62 00:04:45,770 --> 00:04:48,800 plataforma y, por supuesto, también es algo que aprendió en los documentos oficiales. 63 00:04:48,870 --> 00:04:55,380 Allí, puede encontrar información sobre cómo puede configurar la presentación de iconos, eso es 64 00:04:55,380 --> 00:05:01,150 bueno, pero también cómo puede configurar iOS de una manera específica 65 00:05:01,260 --> 00:05:07,310 y allí puede configurar un icono específico para iOS si desea utilizar esto. 66 00:05:07,480 --> 00:05:13,710 Por supuesto, lo mismo es cierto para la pantalla de inicio, por lo que básicamente puede agregar un nodo 67 00:05:13,720 --> 00:05:21,910 iOS a su configuración, ya lo tenemos aquí, incluso allí, también podría agregar un icono y luego también una configuración de inicio que se 68 00:05:21,910 --> 00:05:27,450 ve exactamente o que se vería exactamente como la configuración raíz que tenemos aquí, pero ahora 69 00:05:27,520 --> 00:05:33,730 básicamente podría anular esta configuración general de nivel raíz y tener un icono específico para iOS y una 70 00:05:33,730 --> 00:05:36,170 pantalla de inicio específica para iOS. 71 00:05:36,190 --> 00:05:41,620 Eso es algo que podría hacer y lo mismo es cierto para Android y, por supuesto, también lo encuentra 72 00:05:41,620 --> 00:05:42,820 en los documentos oficiales. 73 00:05:43,000 --> 00:05:49,050 Puede agregar una clave de Android aquí a su aplicación. json y luego esto contiene un objeto, por 74 00:05:49,060 --> 00:05:55,780 ejemplo, allí también puede configurar un icono y una configuración de bienvenida tal como lo expliqué para iOS y 75 00:05:55,840 --> 00:05:58,900 ahora esta configuración se tomaría para Android, iOS ya 76 00:05:59,140 --> 00:06:04,120 que no tiene configuraciones específicas en mi ejemplo aquí todavía usaría la configuración general 77 00:06:04,120 --> 00:06:05,190 allá arriba. 78 00:06:05,200 --> 00:06:10,690 Ahora lo interesante es para Android, no solo puede configurar una pantalla de inicio de 79 00:06:10,780 --> 00:06:18,580 icono específica, también puede configurar un icono adaptativo aquí con la configuración de icono adaptativo, que no está disponible para iOS 80 00:06:18,580 --> 00:06:21,820 porque los iconos adaptativos son exclusivos de Android. 81 00:06:21,820 --> 00:06:29,450 El ícono adaptativo toma un objeto Javascript, por decirlo como un valor de configuración, no una cadena, y este objeto puede 82 00:06:29,680 --> 00:06:35,950 tener tres claves: una imagen de primer plano, un color de fondo o una imagen de fondo. 83 00:06:35,950 --> 00:06:40,960 Ahora tiene un color de fondo o una imagen de fondo, pero siempre debe tener una imagen 84 00:06:40,960 --> 00:06:41,850 de primer plano. 85 00:06:41,890 --> 00:06:46,780 Ahora aquí podemos agregar una imagen de primer plano, por lo que esta clave 86 00:06:46,780 --> 00:06:53,410 aquí y el color de fondo, que debería ser un código hexadecimal de seis dígitos, como puede ver, hagamos 87 00:06:53,520 --> 00:06:59,590 eso rápidamente aquí y ahora podemos establecer el color de fondo para decir que el código # 171717 88 00:06:59,590 --> 00:07:04,750 y el la imagen de primer plano ahora se puede configurar en nuestro icono, aunque 89 00:07:04,750 --> 00:07:07,900 para esto recomendaría que use un icono específico que 90 00:07:08,020 --> 00:07:16,990 también encontrará adjunto aquí, el lugar adaptable. archivo png que puede arrastrar y soltar en su carpeta de activos y que se adapta a los lugares. El archivo png ahora se puede usar aquí 91 00:07:17,410 --> 00:07:23,800 como una imagen de primer plano, por lo que podemos apuntar a los activos y luego a los 92 00:07:23,830 --> 00:07:25,630 lugares adaptables. png. 93 00:07:25,690 --> 00:07:30,550 Ahora este ícono, el ícono adaptativo de lugares es transparente, sigue siendo el ícono pero 94 00:07:30,550 --> 00:07:34,990 tiene un fondo transparente, a diferencia del otro ícono y eso permitirá que 95 00:07:34,990 --> 00:07:39,640 Android lo coloque delante de este color de fondo o imagen de fondo que 96 00:07:39,640 --> 00:07:43,650 proporcionó y automáticamente doblar las esquinas para ti y así sucesivamente. 97 00:07:43,660 --> 00:07:51,400 Entonces, si ahora guardamos esto y, por lo tanto, se reconstruye y para estar seguro de que realmente tiene esto en cuenta, 98 00:07:51,430 --> 00:07:53,910 reiniciaré mi servidor de exposición aquí. 99 00:07:54,040 --> 00:08:00,370 Si ahora lanzamos esto en Android y para eso también cerraré el cliente de exposición aquí y luego volveré 100 00:08:03,390 --> 00:08:05,490 a ejecutar esto en Android, 101 00:08:05,490 --> 00:08:08,990 deberíamos ver que una vez que se reinicie, ahora tenemos 102 00:08:09,000 --> 00:08:12,540 un icono más agradable que se ve un poco mejor. 103 00:08:12,600 --> 00:08:14,060 Así que esperemos a que 104 00:08:14,070 --> 00:08:19,560 se inicie, esta sigue siendo la pantalla de inicio como la configuramos antes, tampoco configuré una pantalla de inicio específica de Android 105 00:08:19,560 --> 00:08:21,700 que, por supuesto, pudimos, pero aquí no lo 106 00:08:21,720 --> 00:08:25,810 hice, así que, por supuesto, obtuvimos el mismo pantalla de inicio como anteriormente en este módulo y 107 00:08:26,110 --> 00:08:31,440 si ahora mira el ícono, desafortunadamente aún puede ver el anterior. La nueva se tendrá en cuenta, aunque una 108 00:08:31,440 --> 00:08:37,320 vez que hayamos creado esta aplicación como una aplicación independiente y la distribuyamos a las tiendas de aplicaciones. 109 00:08:38,100 --> 00:08:43,110 En general, la recomendación es que para Android, establezca un ícono tan adaptable porque cubre más 110 00:08:43,110 --> 00:08:49,470 versiones de Android, lo que no duele, por supuesto. Establecer un ícono tan general tampoco es una mala idea y, 111 00:08:49,470 --> 00:08:50,040 por 112 00:08:50,070 --> 00:08:54,780 supuesto, podemos usar el mismo ícono para iOS y Android o establecer íconos específicos para iOS 113 00:08:54,810 --> 00:09:01,110 y Android, como se mencionó para Android, posiblemente, el ícono adaptativo. Si desea obtener más información sobre el proceso de 114 00:09:01,110 --> 00:09:06,180 creación y administración de iconos y pantallas de presentación, adjunto encontrará los documentos de exposición 115 00:09:06,180 --> 00:09:11,160 oficiales que profundizan en las diferentes opciones que tiene allí y lo que debe considerar.