1
00:00:02,070 --> 00:00:07,410
Entonces, en la pantalla de la lista de lugares, quiero generar una lista de lugares como era de esperar y para

2
00:00:07,550 --> 00:00:09,780
eso sabes un componente de React Native que podemos

3
00:00:09,780 --> 00:00:14,010
importar y esa es la lista plana. La lista plana, por supuesto, es perfecta

4
00:00:14,040 --> 00:00:15,620
para generar una lista.

5
00:00:15,780 --> 00:00:18,570
Así que aquí volveré a la lista

6
00:00:18,900 --> 00:00:21,890
plana ahora y quiero acceder a mis lugares.

7
00:00:21,930 --> 00:00:23,970
Estos se almacenan en Redux para

8
00:00:23,970 --> 00:00:30,960
que podamos o con la ayuda de Redux, para que podamos importar React Redux aquí o, para ser precisos, desde ese paquete, importamos

9
00:00:30,960 --> 00:00:37,740
el selector de uso porque ahora en nuestro componente, podemos usar eso para obtener acceso a los datos almacenado en Redux.

10
00:00:37,740 --> 00:00:41,630
Entonces, aquí, quiero obtener acceso a mis lugares con la ayuda

11
00:00:41,640 --> 00:00:47,190
del selector de uso, eso es muy fácil, pasamos esa función que recibe nuestra tienda Redux,

12
00:00:47,190 --> 00:00:53,490
nuestro estado Redux que está almacenado en la tienda allí y allí quiero obtener acceso a la rebanada de

13
00:00:53,490 --> 00:00:59,880
lugares y aquí uso lugares porque en la aplicación. js, utilicé lugares como un identificador aquí, que nos lleva al segmento administrado con el

14
00:01:00,240 --> 00:01:02,880
reductor de lugares y en ese reductor, tenemos otra clave de lugares,

15
00:01:03,000 --> 00:01:09,870
así que al final aquí quiero acceder al estado. lugares. lugares y con eso, sabemos qué

16
00:01:09,870 --> 00:01:12,660
tipo de datos queremos alimentar a la lista plana.

17
00:01:12,660 --> 00:01:19,800
Ahora nuevamente, también agregaré un extractor de claves aquí para decirle a la lista plana dónde encontrar una identificación única para cada elemento y

18
00:01:19,800 --> 00:01:23,480
para mí que está en la propiedad de identificación de cada lugar

19
00:01:23,490 --> 00:01:29,820
y, por supuesto, necesitamos agregar un elemento de representación, para que podamos obtener nuestros datos de datos del elemento y luego

20
00:01:29,820 --> 00:01:32,920
generar un componente para cada elemento que deseamos generar.

21
00:01:33,060 --> 00:01:38,730
Ahora para eso, en realidad crearé un nuevo componente en la carpeta de componentes

22
00:01:38,790 --> 00:01:47,910
y ese es el PlaceItem. archivo js. Ahora, para ahorrar tiempo, adjunté mi PlaceItem. js presenta esta conferencia y puedes reemplazar el

23
00:01:48,180 --> 00:01:53,040
tuyo o el contenido tuyo por el mío, pero por supuesto te guiaré por lo que estoy

24
00:01:53,040 --> 00:01:53,790
haciendo allí.

25
00:01:53,910 --> 00:01:59,520
Este es un componente básico, ya que también lo construimos varias veces a lo largo de este

26
00:01:59,520 --> 00:02:05,460
curso, solo tengo mi propio componente aquí que puede generar una imagen porque lo necesitaremos más adelante, que

27
00:02:05,520 --> 00:02:09,240
luego tiene una vista con dos textos que siéntate al lado

28
00:02:09,270 --> 00:02:15,930
de esta imagen, gracias al estilo que apliqué allí. Allí, saco el título y la dirección de ese

29
00:02:15,930 --> 00:02:21,900
lugar, por supuesto, esa es información que aún no tenemos, pero agregaremos esto a lo largo de este módulo y

30
00:02:21,900 --> 00:02:27,720
tenemos un componente de opacidad que se puede tocar alrededor para que podamos presionar cada lugar y cuándo lo

31
00:02:27,720 --> 00:02:31,400
presionamos, activamos una función que esperamos obtener en el accesorio de selección.

32
00:02:31,440 --> 00:02:36,990
Ahora en mi estilo aquí, configuré esto de modo que la imagen y este bloque de texto se sientan uno

33
00:02:36,990 --> 00:02:43,230
al lado del otro en una fila aquí con la fila de dirección flexible, la imagen es entonces la imagen redondeada, por lo

34
00:02:43,230 --> 00:02:49,860
que es una imagen redondeada, es un círculo con un color de fondo completo en caso de que todavía no tengamos una imagen que,

35
00:02:49,860 --> 00:02:56,310
por supuesto, también puede cambiar a, por ejemplo, este color grisáceo. Luego tenemos el contenedor de información que es el

36
00:02:56,310 --> 00:03:01,590
contenedor que contiene las dos partes de texto que ahora están organizadas en una columna una encima

37
00:03:02,010 --> 00:03:07,290
de la otra y luego tenemos el título que es un poco más grande que la dirección

38
00:03:07,290 --> 00:03:14,210
y, de hecho, también quiero usar negro como color de texto. Esa es la configuración que usaré aquí y ese es

39
00:03:14,210 --> 00:03:17,330
el elemento de lugar que ahora podemos importar en

40
00:03:17,330 --> 00:03:27,850
la pantalla de la lista de lugares, por lo que allí podemos importar el elemento de lugar desde el elemento de lugar de componentes y mostrar esto aquí en elementos de representación.

41
00:03:27,850 --> 00:03:34,780
Entonces, allí quiero generar un elemento de posición como un componente de cierre automático y ahora colocar el elemento,

42
00:03:34,780 --> 00:03:40,630
este nuevo componente necesita algunos datos de entrada. Necesitamos pasar un accesorio de selección que apunta

43
00:03:40,630 --> 00:03:47,560
a una función que debe ejecutarse cuando tocamos un icono. Necesitamos pasar un accesorio de imagen, un accesorio de título y un accesorio de dirección,

44
00:03:47,560 --> 00:03:53,730
por lo que se deben proporcionar cuatro accesorios. Entonces hagamos eso aquí. Para la imagen, todavía no tenemos

45
00:03:53,740 --> 00:03:59,500
imagen, así que aquí pasaré nulo por el momento. Para el título, podemos hacer eso, por

46
00:03:59,590 --> 00:04:06,010
supuesto, podemos apuntar a itemData. articulo. título porque un solo elemento es solo un elemento que sigue nuestro

47
00:04:06,010 --> 00:04:13,100
modelo de lugar y que, por supuesto, tiene un accesorio de título, por lo que podemos acceder de forma segura. Para la dirección, todavía no tenemos eso, así que

48
00:04:13,100 --> 00:04:14,470
estableceré esto

49
00:04:14,780 --> 00:04:16,260
en nulo y para

50
00:04:16,280 --> 00:04:18,440
seleccionar, bueno, por supuesto, podemos configurar

51
00:04:18,440 --> 00:04:19,940
esto, allí quiero ir

52
00:04:19,970 --> 00:04:25,070
a una nueva página después de todo. Así que podemos hacer esto con una función en línea anónima aquí

53
00:04:25,070 --> 00:04:26,750
o con una función con nombre almacenada en

54
00:04:27,200 --> 00:04:28,300
una constante separada, lo

55
00:04:28,610 --> 00:04:35,440
que quieras, lo haré en línea y allí puedo usar accesorios. navegación. navegue y vaya a la pantalla de detalles

56
00:04:35,450 --> 00:04:40,580
del lugar con el identificador de detalles del lugar que, por supuesto, en mi navegador es este identificador

57
00:04:43,380 --> 00:04:43,950
aquí

58
00:04:43,980 --> 00:04:50,610
y allá También quiero pasar algunos datos adicionales, algunos parámetros, así que pasaré un segundo argumento aquí para navegar y allá son dos datos

59
00:04:50,610 --> 00:04:52,860
que quiero transmitir, ese es el título del

60
00:04:52,860 --> 00:04:57,680
lugar y, por supuesto, es itemData. articulo. título, así que exactamente lo

61
00:04:57,750 --> 00:05:01,770
mismo que estoy introduciendo en el accesorio de título aquí y ese también es el

62
00:05:01,770 --> 00:05:06,650
ID de lugar que es itemData. articulo. ID y también tenemos

63
00:05:06,720 --> 00:05:08,890
esa ID, así que eso es

64
00:05:08,910 --> 00:05:14,640
algo que estamos generando cuando agregamos un nuevo lugar. Con eso, tenemos un elemento de lugar que nos

65
00:05:14,640 --> 00:05:19,800
lleva a la pantalla de detalles del lugar y dado que ya tenemos un esqueleto básico en

66
00:05:19,950 --> 00:05:21,890
esa pantalla, deberíamos poder ver eso.

67
00:05:21,960 --> 00:05:28,170
Sin embargo, una cosa que agregaré a la pantalla de detalles del lugar es mi configuración de opciones de navegación

68
00:05:28,170 --> 00:05:34,950
donde necesito esa función dinámica que luego devuelve un objeto de configuración porque allí quiero establecer el título del encabezado en función

69
00:05:34,950 --> 00:05:41,040
de los parámetros que obtengo porque en la lista de lugares pantalla, estoy pasando un título de lugar y un

70
00:05:41,040 --> 00:05:47,070
parámetro de ID de lugar a esta nueva pantalla. El título del lugar es lo que quiero extraer y configurar aquí en

71
00:05:47,070 --> 00:05:47,890
mi encabezado, por

72
00:05:47,940 --> 00:05:56,040
lo que allí puedo configurar el título del encabezado en navData. navegación. getParam place title para

73
00:05:56,070 --> 00:06:02,910
que tengamos este título en el encabezado. Y ahora con eso, probemos, guardemos

74
00:06:02,910 --> 00:06:11,230
todo y agreguemos un nuevo lugar, una prueba. Haga clic en Guardar lugar, volvemos y vemos que aquí, si lo toco, vamos

75
00:06:11,230 --> 00:06:18,100
a la pantalla de detalles donde vemos eso en el encabezado. También probémoslo en Android con una prueba,

76
00:06:18,700 --> 00:06:26,070
guárdelo, haga clic en él y todo funcionará. Así que ese es el flujo básico para esto, pero una

77
00:06:26,070 --> 00:06:30,300
cosa que todavía no hemos hecho, por supuesto, es usar alguna funcionalidad nativa.

78
00:06:30,570 --> 00:06:34,710
Así que ahora es hora de que hagamos eso y quiero comenzar con la cámara.