1 00:00:02,500 --> 00:00:07,190 Ahora deshabilité los enlaces aquí para no tener todas estas advertencias y errores con respecto al estilo del código. 2 00:00:07,190 --> 00:00:10,550 Por supuesto, puede ajustar su código para seguir ese estilo, esa 3 00:00:10,640 --> 00:00:12,820 es una preferencia personal al final. 4 00:00:12,830 --> 00:00:19,070 Ahora, lo que quiero hacer aquí es mostrarle cómo, por supuesto, puede cambiar el código, pero también 5 00:00:19,130 --> 00:00:24,390 cómo podemos agregar una funcionalidad nativa en una aplicación React Native tan vainilla. 6 00:00:24,610 --> 00:00:28,780 Entonces, para eso, en primer lugar simplificaré mucho esta 7 00:00:28,850 --> 00:00:37,250 aplicación de inicio, simplemente elimine todo ese contenido aquí y solo agregue un estilo básico configurado aquí con flex one, justifique 8 00:00:37,400 --> 00:00:44,090 el centro de contenido y alinee el centro de elementos para centrar mi contenido la pantalla. 9 00:00:44,090 --> 00:00:46,550 Deshágase de esto aquí y 10 00:00:46,760 --> 00:00:54,150 de todas estas importaciones aquí, quiero usar la hoja de estilo, quiero usar la vista y quiero usar 11 00:00:54,290 --> 00:00:59,720 el botón porque lo que quiero agregar es la funcionalidad del selector de imágenes. 12 00:00:59,750 --> 00:01:01,660 Así que aquí devuelvo mi 13 00:01:02,750 --> 00:01:08,100 vista y mi botón y en el botón, digo tomar imagen y luego en onPress, 14 00:01:08,240 --> 00:01:10,460 quiero abrir el selector de imágenes. 15 00:01:10,460 --> 00:01:11,990 Ahora, ¿cómo podemos agregar esto? 16 00:01:12,230 --> 00:01:20,030 Ahora, dado que este es un proyecto React Native sin expo de ninguna manera, no podemos usar fácilmente las API de expo aquí. 17 00:01:20,040 --> 00:01:25,530 En realidad, hay una forma de usarlos y volveré sobre eso más adelante en este módulo, 18 00:01:25,530 --> 00:01:30,690 pero necesitaría configurar un par de cosas. Por lo tanto, lo que podemos hacer 19 00:01:30,690 --> 00:01:34,660 es hacer algo que harás mucho si estás trabajando con una aplicación React 20 00:01:34,730 --> 00:01:39,810 Native de vainilla, buscamos el selector de imágenes React Native, por ejemplo, para encontrar un paquete que 21 00:01:39,810 --> 00:01:43,060 nos ayude con eso, por ejemplo este, el paquete de 22 00:01:43,320 --> 00:01:49,140 selección de imágenes React Native y ahora podemos instalarlo porque ahora podemos incorporar cualquier paquete de terceros, sin importar 23 00:01:49,320 --> 00:01:55,080 si agrega funcionalidades nativas o no a su aplicación. Anteriormente con expo, esto no era realmente posible, 24 00:01:55,080 --> 00:01:59,520 allí solo podía traer paquetes de terceros que no aprovechaban las funciones nativas del 25 00:01:59,520 --> 00:02:01,380 dispositivo, ahora no tiene restricciones. 26 00:02:01,470 --> 00:02:03,060 Así que 27 00:02:03,360 --> 00:02:09,810 ahora podemos agregar esto y aquí podemos instalarlo siguiendo las instrucciones de instalación aquí, 28 00:02:09,810 --> 00:02:18,690 así que volviendo a nuestro proyecto y allí ejecutando npm install --save y luego aquí está el selector de imagen 29 00:02:21,970 --> 00:02:25,430 React Native, como este. Por cierto, puede mantener este proceso aquí 30 00:02:25,450 --> 00:02:30,730 en ejecución y debe hacerlo para que los cambios de código una vez que guarde sus archivos sean recogidos y enviados a sus dispositivos. 31 00:02:30,970 --> 00:02:34,310 Esperemos a que termine esta instalación ahora. 32 00:02:34,330 --> 00:02:35,090 Ahora está listo, 33 00:02:35,110 --> 00:02:35,860 tomó 34 00:02:36,800 --> 00:02:39,240 bastante tiempo y ahora necesitamos instalar esto 35 00:02:39,240 --> 00:02:41,900 y lo bueno es que este paquete es 36 00:02:41,910 --> 00:02:44,770 muy fácil de instalar, solo debería ejecutar este comando 37 00:02:44,790 --> 00:02:47,250 aquí: React Native link, React Native image select. 38 00:02:47,340 --> 00:02:49,270 Así que ejecuta esto 39 00:02:50,400 --> 00:02:53,550 en tu proyecto, así y deberías ser bueno. 40 00:02:53,730 --> 00:02:57,870 Ahora diré que hay paquetes de terceros que requieren más esfuerzo, 41 00:02:57,870 --> 00:03:00,960 realmente depende del paquete. Para la exposición, obviamente 42 00:03:00,960 --> 00:03:05,540 fue muy fácil, simplemente ejecutó la instalación de la exposición, fue muy rápido, 43 00:03:05,550 --> 00:03:08,720 no tardó tanto y no necesitó hacer nada más. 44 00:03:08,880 --> 00:03:11,140 Aquí debe ejecutar un comando adicional pero, 45 00:03:11,270 --> 00:03:12,870 por supuesto, eso tampoco 46 00:03:12,870 --> 00:03:16,890 es tan malo, pero nuevamente, diré que no todos los paquetes admiten 47 00:03:16,920 --> 00:03:22,950 este comando, algunos paquetes requieren mucho más trabajo de cableado manual, trabajo manual donde realmente necesita sumergirse en 48 00:03:22,950 --> 00:03:28,250 el Carpetas de Android e iOS para comenzar a trabajar en algunos archivos de configuración allí. 49 00:03:28,290 --> 00:03:33,600 Eso es lo que hizo el comando React Native Link para usted, por ejemplo en Android si se sumerge 50 00:03:33,600 --> 00:03:39,540 en la carpeta de la aplicación y allí, fuente y luego en la carpeta de origen en build gradle, verá que 51 00:03:42,290 --> 00:03:43,970 allí, se agregó esta línea. 52 00:03:44,000 --> 00:03:45,710 Esto no estaba allí desde 53 00:03:45,710 --> 00:03:48,610 el principio, esto fue agregado por el comando de enlace 54 00:03:48,830 --> 00:03:52,250 React Native y para algunos paquetes debe agregar estas entradas manualmente, muchos 55 00:03:52,250 --> 00:03:57,080 paquetes admiten el comando de enlace y con versiones más recientes de React Native, algunos paquetes incluso 56 00:03:57,080 --> 00:04:02,480 admite la vinculación automática donde esta vinculación se realizará automáticamente una vez que finalice la instalación, pero no todos 57 00:04:02,480 --> 00:04:06,550 los paquetes tienen esa compatibilidad, por lo que es algo a tener en cuenta. 58 00:04:06,550 --> 00:04:12,680 Detrás de escena, se cambió mucha configuración. Con eso, ahora podemos usar este 59 00:04:13,100 --> 00:04:19,680 paquete, nuevamente como se indica en sus documentos para que podamos agregar esta importación aquí, 60 00:04:20,000 --> 00:04:31,050 aquí, luego también agregar la función de selección de imagen aquí tal vez y conectarla a nuestro botón y ahora aquí, el selector de imagen 61 00:04:34,100 --> 00:04:37,360 funciona un poco diferente a la expo. 62 00:04:37,370 --> 00:04:42,400 Aquí llamamos al selector de imágenes show selector de imágenes con opciones que podemos configurar, las 63 00:04:42,410 --> 00:04:49,550 opciones se configuran como se describe aquí o en los documentos en general y aquí simplemente tomaré todo este código aquí, así, 64 00:04:49,640 --> 00:04:56,120 copie eso en la imagen de selección función, deshacerse de esta llamada de estado establecido, no estamos en un componente 65 00:04:56,140 --> 00:04:58,510 basado en la clase, así que eso 66 00:04:58,510 --> 00:05:00,450 no es algo que podamos hacer, 67 00:05:00,460 --> 00:05:03,820 en su lugar, aquí en el bloque else, solo voy 68 00:05:04,000 --> 00:05:06,560 a consolar el URI de respuesta, que debería 69 00:05:06,590 --> 00:05:09,960 ser la ruta de la imagen que fue tomada y 70 00:05:10,150 --> 00:05:11,160 luego tenemos 71 00:05:11,340 --> 00:05:16,330 un par de controladores para diferentes escenarios aquí y con eso, veamos si eso funciona. 72 00:05:16,330 --> 00:05:17,440 Si guardamos 73 00:05:20,110 --> 00:05:21,550 esto, normalmente debería reconstruirse 74 00:05:21,550 --> 00:05:28,470 aquí, pero debido a nuestro nuevo paquete instalado, abandonaré este proceso y volveré a ejecutar react-native run-android aquí ahora 75 00:05:28,490 --> 00:05:33,680 en mi terminal integrado en Visual Studio Code y, por lo tanto, en 76 00:05:33,680 --> 00:05:42,270 esta carpeta de proyecto y ahora Esto abrirá nuevamente este servidor de desarrollo y, lo que es más importante, también relanzará la aplicación 77 00:05:42,270 --> 00:05:47,750 en el emulador para que podamos verlo allí y probar el selector de imágenes aquí. 78 00:05:47,820 --> 00:05:51,060 Así que esperemos a que eso termine, a que termine ese proceso de compilación. 79 00:05:51,060 --> 00:05:58,260 Ahora aquí está la aplicación que aparece y si la presiono, obtengo esta superposición, puedo hacer clic en tomar foto 80 00:05:58,260 --> 00:05:59,700 y no pasa nada. 81 00:05:59,700 --> 00:06:04,290 La razón de eso es la falta de permisos y ese es el trabajo manual que quise decir. Tenemos que ir a 82 00:06:04,290 --> 00:06:11,610 la carpeta de Android, allí en source, main, AndroidManifest que configura la aplicación de Android y 83 00:06:11,610 --> 00:06:16,770 allí debe agregar un nuevo permiso. Puede copiar este permiso de Internet que siempre 84 00:06:16,770 --> 00:06:22,530 necesitará para que la aplicación de Android se comunique con el servidor de desarrollo y ahora puede agregar el permiso 85 00:06:22,530 --> 00:06:29,360 de cámara que necesita agregar para que esta aplicación pueda acceder a la cámara del dispositivo; de lo contrario, esto no es apoyado. 86 00:06:29,370 --> 00:06:35,820 Así que ahora podemos volver a ejecutar este proceso, reconstruir la aplicación y asegurarnos de tener en cuenta esta nueva 87 00:06:35,820 --> 00:06:39,090 configuración y con eso, ahora deberíamos poder abrir esto. 88 00:06:39,120 --> 00:06:43,070 Entonces, de nuevo, es una configuración adicional que no tuvimos que hacer en el mundo de la exposición, por supuesto. 89 00:06:44,400 --> 00:06:49,180 Por cierto, en iOS, también debe hacer algo similar mientras se reconstruye. Allí, si ingresa 90 00:06:49,200 --> 00:06:57,100 a su archivo RNWithoutExpo, encontrará la información. plist file y en ese archivo, 91 00:06:57,490 --> 00:07:02,630 también debe agregar una entrada para solicitar este permiso. 92 00:07:07,760 --> 00:07:14,660 Debe agregar una nueva clave aquí después de un par clave-valor existente, la posición exacta no importa y 93 00:07:14,670 --> 00:07:19,920 encontrará las instrucciones detalladas en los documentos oficiales de ese paquete, debajo del 94 00:07:19,920 --> 00:07:25,710 documento instalado, si hace clic allí, usted Encontraré instrucciones sobre qué permisos deben configurarse para 95 00:07:25,710 --> 00:07:27,100 Android, también olvidé 96 00:07:27,150 --> 00:07:32,240 uno, también necesitamos configurar este permiso de almacenamiento externo, así que déjenme volver 97 00:07:32,250 --> 00:07:38,380 al AndroidManifest, agregue esto aquí y ahora vuelva a ejecutar esto en Android y iOS , 98 00:07:38,410 --> 00:07:43,970 allí debe configurar estas claves aquí. Entonces copie todo eso 99 00:07:47,020 --> 00:07:53,410 y luego regrese a la información. archivo plist que le mostré aquí y ahora puede agregar estos pares clave-valor aquí. 100 00:07:57,460 --> 00:07:58,210 Con 101 00:07:58,750 --> 00:08:01,750 eso, verifiquemos la aplicación en Android y si ahora hago 102 00:08:01,930 --> 00:08:05,860 clic en tomar foto, ahora se me pide permiso aquí, esto ahora 103 00:08:05,860 --> 00:08:08,730 sucede automáticamente, el paquete lo hace por nosotros y 104 00:08:08,920 --> 00:08:12,120 ahora, la cámara se abre. Así que ahora funciona, 105 00:08:12,130 --> 00:08:17,350 pero como viste con un poco de configuración adicional y siguiendo las instrucciones de los 106 00:08:17,350 --> 00:08:23,260 documentos oficiales, cada paquete tendrá sus propias instrucciones allí. Algunos paquetes ni siquiera admiten el comando 107 00:08:23,260 --> 00:08:23,830 de 108 00:08:23,860 --> 00:08:25,530 enlace, allí debe hacer 109 00:08:25,560 --> 00:08:31,380 aún más, otros paquetes requieren menos trabajo. Tiene más flexibilidad pero, por lo tanto, también más deberes. 110 00:08:31,390 --> 00:08:37,240 Sin embargo, así es como puede llevar paquetes de terceros que aprovechan las funciones nativas del dispositivo a una aplicación React Native solo 111 00:08:37,240 --> 00:08:40,970 para su código de componente que usted escribe, ese es el mismo código que 112 00:08:41,020 --> 00:08:43,630 escribimos a lo largo de todo el curso: mismos 113 00:08:43,630 --> 00:08:49,660 componentes, misma lógica, de la misma manera de cómo construyes tu aplicación. Puede crear las mismas carpetas, puede agregar 114 00:08:49,660 --> 00:08:52,540 React navigation, que no todo cambia.