1 00:00:02,200 --> 00:00:07,030 Así que asegurémonos de que podamos ver todos los datos con los que estamos trabajando. En el artículo del lugar, ya 2 00:00:07,030 --> 00:00:09,310 tengo una idea de la 3 00:00:09,310 --> 00:00:14,820 dirección, solo necesito asegurarme de que encaje allí. Entonces, en la pantalla de la lista de lugares, cuando uso el elemento de lugar, en lugar 4 00:00:14,830 --> 00:00:20,940 de pasar nulo para la dirección, por supuesto, deberíamos pasar itemData. articulo. dirección allí porque 5 00:00:20,940 --> 00:00:23,820 deberíamos tener la dirección almacenada. 6 00:00:23,820 --> 00:00:33,960 Entonces, si intentamos eso y esto se vuelve a cargar, vemos una dirección ficticia aquí y ahora si agregamos un nuevo elemento que debería funcionar 7 00:00:33,960 --> 00:00:41,260 como un título y luego una imagen para tomar una buena imagen e incluso podemos movernos un 8 00:00:41,260 --> 00:00:43,600 poco presionando el botón clave que 9 00:00:43,600 --> 00:00:45,480 ves allí, así que 10 00:00:45,700 --> 00:00:46,630 ahora 11 00:00:47,870 --> 00:00:55,760 si tomo una imagen aquí, sí, esto se ve bien, este y confirmo haciendo clic en recortar allí, eso 12 00:00:55,850 --> 00:00:56,900 se ve bien. 13 00:00:56,900 --> 00:01:02,600 Ahora obtenga la ubicación del usuario tal vez y luego guarde esto, esto se ve bien. 14 00:01:02,600 --> 00:01:04,350 Esta es la dirección de la sede de Google, 15 00:01:04,350 --> 00:01:05,550 se parece a la imagen que 16 00:01:05,550 --> 00:01:06,630 tomé, así que está bien. 17 00:01:06,630 --> 00:01:12,240 Asegurémonos de que en la página de detalles, también veamos un poco más sobre esto y para eso en 18 00:01:12,570 --> 00:01:19,890 la pantalla de detalles del lugar aquí, por supuesto, podemos ajustar esto y agregar una vista de desplazamiento para asegurarnos de que siempre podamos ver 19 00:01:19,890 --> 00:01:25,460 todo. no necesito una lista plana aquí porque no tendremos una cantidad infinita de elementos, tal vez solo 20 00:01:25,460 --> 00:01:28,690 un poco de desplazamiento que se requiere en función del 21 00:01:29,180 --> 00:01:32,840 tamaño del dispositivo y luego, definitivamente, quiero poder generar una imagen . 22 00:01:32,840 --> 00:01:36,410 Así que aquí generaré mi imagen y debajo de eso, 23 00:01:36,410 --> 00:01:43,270 también quiero poder generar mi dirección y luego, en realidad, una vista previa del mapa, así que también importaré 24 00:01:43,280 --> 00:01:47,190 esto y tendremos que ajustar un poco ese componente por lo 25 00:01:47,200 --> 00:01:55,110 tanto, pero por ahora solo importaré la vista previa del mapa desde la vista previa del mapa de componentes, como esta, y 26 00:01:55,110 --> 00:01:57,830 mostraré esto debajo de mi texto aquí. 27 00:01:57,890 --> 00:02:06,650 Ahora en el texto, quiero tener el texto de mi dirección al final y eso es, por supuesto, todos los datos que espero 28 00:02:06,650 --> 00:02:11,040 que se pasen como parámetros o con la ayuda de parámetros, 29 00:02:11,120 --> 00:02:16,660 para ser precisos cuando seleccionamos un elemento, ya pasamos la identificación del lugar aquí. 30 00:02:16,700 --> 00:02:25,200 Entonces, en la pantalla de detalles del lugar, puedo obtener la ID del lugar accediendo a los accesorios. navegación. El ID de lugar de getParam 31 00:02:25,230 --> 00:02:32,430 es el identificador que utilicé y luego, por supuesto, podemos usar el selector de uso para 32 00:02:32,490 --> 00:02:33,530 obtener 33 00:02:33,540 --> 00:02:36,680 los datos de ajuste de nuestra tienda 34 00:02:36,780 --> 00:02:47,260 Redux, así que desde React Redux, de ahí importamos esto y luego aquí, podemos obtener nuestro lugar seleccionado con el ayuda del selector de 35 00:02:47,300 --> 00:02:57,950 uso, pasar una función y acceder al estado. lugares. lugares y luego el método find para encontrar un lugar 36 00:02:57,950 --> 00:03:03,920 específico donde la ID del lugar debe ser igual a la ID del lugar que estamos extrayendo de 37 00:03:03,920 --> 00:03:11,420 nuestros parámetros, ese es el lugar que cargamos para esta pantalla y el lugar seleccionado, por lo tanto, tiene un campo de dirección 38 00:03:11,420 --> 00:03:17,750 que podemos acceder porque al final sigue nuestro modelo de lugar y para la imagen, por supuesto, también podemos vincular 39 00:03:17,750 --> 00:03:26,600 la fuente y establecer el URI en este objeto, pasamos la fuente a selectedPlace. imageUri porque en mi modelo de lugar allí, llamo 40 00:03:26,690 --> 00:03:30,510 a este URI de imagen, eso es lo 41 00:03:30,520 --> 00:03:31,440 que 42 00:03:31,440 --> 00:03:33,640 extraigo aquí y para la 43 00:03:33,940 --> 00:03:38,380 vista previa del mapa, quiero pasar en mi ubicación. 44 00:03:38,390 --> 00:03:42,590 Lo bueno es que mi vista previa del mapa, por supuesto, toma 45 00:03:42,590 --> 00:03:49,430 una ubicación, busca este accesorio de ubicación para poder pasar esto y este debería ser un objeto realmente con la 46 00:03:49,520 --> 00:03:57,340 tecla lat, para que podamos usar selectedPlace. lat para esto y la tecla lng que se selecciona Place. lng. 47 00:03:57,360 --> 00:04:01,540 Así que ahora pasamos todo eso allí. 48 00:04:01,590 --> 00:04:09,030 Ahora también envolveré el texto aquí en una vista y luego asignaré algunos estilos aquí, así 49 00:04:09,070 --> 00:04:19,490 que en la imagen aquí, quiero tener un estilo de estilos. imagen en esta vista aquí que envuelve todo mi material basado en 50 00:04:19,490 --> 00:04:21,670 la ubicación, quiero tener 51 00:04:21,800 --> 00:04:28,350 un estilo de, digamos, contenedor de ubicación. En esta vista aquí, un 52 00:04:28,370 --> 00:04:29,600 contenedor 53 00:04:31,980 --> 00:04:44,550 de estilo de dirección, en el texto aquí, estilo de dirección y en la vista previa del mapa, también estableceré un 54 00:04:44,550 --> 00:04:46,400 estilo y nombraré 55 00:04:46,400 --> 00:04:49,860 esta vista previa del mapa, así. 56 00:04:51,410 --> 00:04:56,630 Ahora, si usa exactamente los mismos nombres, adjunto encontrará un estilo que configuré para usted, puede reemplazar su 57 00:04:56,630 --> 00:04:59,010 objeto de estilos con eso y esto configura 58 00:04:59,120 --> 00:05:04,520 estilos para todos estos identificadores que acabo de agregar para que todo se vea como quiero que se vea. 59 00:05:04,520 --> 00:05:09,200 Eso está adjunto y puede usarlo para asegurarse de obtener el mismo estilo de fábrica sin 60 00:05:09,200 --> 00:05:13,730 que yo escriba todos estos estilos porque hemos escrito muchos estilos a lo largo de 61 00:05:13,730 --> 00:05:18,430 este curso, aquí realmente quiero centrarme en la funcionalidad nativa y no escríbelos todos de nuevo. 62 00:05:18,490 --> 00:05:23,420 Ahora, una cosa importante, en la vista de desplazamiento, también debe configurar el estilo del contenedor 63 00:05:23,420 --> 00:05:29,300 de contenido y allí usaré un estilo en línea rápido y sucio para configurar los elementos de alineación aquí 64 00:05:29,300 --> 00:05:37,710 en los centros para que todo esté bien centrado en el eje horizontal. Con eso deberíamos poder ver los detalles sobre un lugar. 65 00:05:37,710 --> 00:05:41,590 Una nota importante, utilizo los colores constantes en los estilos que 66 00:05:41,620 --> 00:05:50,490 le proporcioné, por lo que debe asegurarse de importarlos, importar colores de Constantes / colores y con esa importación agregada aquí también, si guarda 67 00:05:50,490 --> 00:05:56,970 eso y esto vuelve a cargar, debería poder ver estos lugares en Android y, por supuesto, podría mostrar 68 00:05:56,970 --> 00:06:00,480 un texto alternativo si no tiene lugares, pero ahora aquí, 69 00:06:00,480 --> 00:06:03,360 verá los lugares y si hago clic 70 00:06:03,360 --> 00:06:06,570 en él, esta es la pantalla de detalles. 71 00:06:06,750 --> 00:06:10,170 Ahora, el único problema que tengo con eso es que se 72 00:06:10,170 --> 00:06:10,890 ve bien, 73 00:06:10,980 --> 00:06:17,300 eso es bueno, pero si hago clic en el mapa, no pasa nada y, por supuesto, allí también quiero ir a la 74 00:06:17,300 --> 00:06:23,650 pantalla del mapa, pero de una manera no editable, de modo que vaya a la pantalla del mapa sin poder editarlo allí. 75 00:06:23,750 --> 00:06:25,250 Esa es la pieza restante que 76 00:06:25,250 --> 00:06:25,880 necesitamos agregar.