1
00:00:02,350 --> 00:00:09,690
Entonces, con eso, comencemos con nuestra aplicación aquí y hay varias formas de comenzar, por supuesto, quiero comenzar

2
00:00:09,700 --> 00:00:10,520
primero

3
00:00:10,690 --> 00:00:19,420
dejando caer este estilo de contenedor aquí en mi pantalla de inicio y, en cambio, quiero deshacerme del texto y todo aquí

4
00:00:19,960 --> 00:00:25,060
y quiero comenzar agregando mi propio encabezado, por lo que esta barra

5
00:00:25,060 --> 00:00:27,790
en la parte superior de la pantalla.

6
00:00:28,150 --> 00:00:34,360
Ahora podemos construir esa barra por nuestra cuenta aquí, déjenme deshacerme de esa importación que no

7
00:00:34,360 --> 00:00:39,880
necesitamos y la construiré no dentro de este componente de la aplicación sino en

8
00:00:39,880 --> 00:00:46,630
un archivo de componente separado, en un componente personalizado separado porque y eso ya es algo muy importante

9
00:00:46,630 --> 00:00:47,630
para eliminar,

10
00:00:47,680 --> 00:00:55,360
al igual que en React para aplicaciones web, es una buena práctica dividir su aplicación en múltiples componentes que luego componen

11
00:00:55,360 --> 00:00:59,540
juntos porque eso conduce a un código más manejable y reutilizable.

12
00:00:59,540 --> 00:01:04,660
Así que agregaré una nueva carpeta, componentes, aunque el nombre depende de usted, puede nombrar esa carpeta como

13
00:01:04,910 --> 00:01:09,360
desee y allí quiero tener un encabezado. archivo js para contener el componente de encabezado.

14
00:01:09,490 --> 00:01:14,490
Allí, necesitamos importar React from React para que podamos usar React allí

15
00:01:14,500 --> 00:01:23,300
y escribir código jsx y luego también necesitaremos algunos componentes de React Native porque nunca debes olvidar que estos son los

16
00:01:23,300 --> 00:01:27,650
únicos componentes principales que puedes usar en el final.

17
00:01:27,650 --> 00:01:31,310
No puede usar ningún elemento HTML web ni nada de eso,

18
00:01:31,310 --> 00:01:34,720
necesita estas primitivas básicas que React Native le brinda.

19
00:01:34,850 --> 00:01:40,290
Así que definitivamente necesitaremos una vista aquí y también un componente de texto y también un componente de hoja de estilo

20
00:01:40,520 --> 00:01:43,420
y ahora con eso, podemos comenzar a construir nuestro encabezado.

21
00:01:43,550 --> 00:01:51,890
Entonces, para esto, agregaré un encabezado constante que contenga mi componente funcional porque trabajaré con componentes funcionales solo en este

22
00:01:51,890 --> 00:01:58,560
curso, usaremos ganchos en lugares donde necesitamos administrar el estado o los efectos secundarios y aquí,

23
00:01:58,620 --> 00:02:06,170
lo haremos por supuesto, exporte este componente al final y también configure un objeto de estilo con una

24
00:02:06,170 --> 00:02:10,460
hoja de estilo para que podamos diseñarlo al final.

25
00:02:10,520 --> 00:02:13,020
Ahora creemos nuestro componente aquí, devolvamos algo aquí

26
00:02:13,040 --> 00:02:14,580
y lo que quiero devolver

27
00:02:14,750 --> 00:02:19,120
es al final una vista con el texto dentro de él y el texto debería

28
00:02:19,120 --> 00:02:20,190
ser nuestro título.

29
00:02:20,300 --> 00:02:26,780
Por lo tanto, entre la etiqueta de apertura y cierre aquí, generaré el título de accesorios para que nuestro

30
00:02:26,780 --> 00:02:34,010
propio componente pueda recibir el título y lo envíe aquí. Y la vista que rodea el texto se usará para posicionar

31
00:02:34,010 --> 00:02:40,790
el texto y para darle un poco de estilo, por lo que para diseñar nuestro encabezado porque los elementos de texto

32
00:02:40,880 --> 00:02:47,960
en sí mismos también son estilizables, pero no en la misma medida que las vistas, las vistas realmente son un poco más

33
00:02:47,960 --> 00:02:53,090
flexible con respecto a los estilos que puede asignar y con respecto a cómo se comportan

34
00:02:53,120 --> 00:02:59,600
y, por lo tanto, siempre desea usar una vista para dicho contenedor circundante y para este estilo general que podría

35
00:02:59,600 --> 00:03:02,380
tener su componente o partes de su componente.

36
00:03:02,390 --> 00:03:08,810
Así que aquí, agregaré el accesorio de estilo y asignaré un estilo para mi objeto de estilos, un estilo que aún no hemos

37
00:03:08,810 --> 00:03:16,810
creado allí, pero lo nombraré encabezado y también le daré al texto un accesorio de estilo y señalaré título de encabezado de estilos o lo que quiera nombrarlo porque,

38
00:03:16,820 --> 00:03:21,500
como dije, también puede aplicar estilo al texto y aquí quiero tener algunos estilos específicos de texto

39
00:03:21,500 --> 00:03:28,360
más adelante para asegurarme de que el texto se vea bien. Así que ahora aquí en la hoja de estilo, podemos comenzar

40
00:03:28,450 --> 00:03:35,170
a diseñar nuestro encabezado y comenzaré con el encabezado en sí mismo, agregando un accesorio de encabezado y luego este objeto contendrá

41
00:03:35,170 --> 00:03:40,810
estas definiciones de estilo para el encabezado, así que para este componente de vista aquí y allá de Por

42
00:03:40,810 --> 00:03:46,960
supuesto, eres libre de experimentar con lo que quieras. Iré con un ancho del 100% para que tome

43
00:03:47,080 --> 00:03:53,470
el ancho completo del dispositivo que podemos obtener o el ancho completo del componente principal para ser precisos, pero lo agregaré

44
00:03:53,470 --> 00:03:58,810
de modo que el componente principal tome el ancho completo del dispositivo y, por lo tanto, ,

45
00:03:58,840 --> 00:04:05,040
esto también tomará todo el ancho del dispositivo al final. Asigne una altura y allí, puede experimentar con

46
00:04:05,040 --> 00:04:10,020
diferentes valores, encontré que 90 parece bastante decente y, por lo tanto, seguiré con eso.

47
00:04:10,020 --> 00:04:16,500
Nota al margen, por ahora optimizaré para estas pantallas que tengo aquí, en el próximo módulo del

48
00:04:16,500 --> 00:04:23,610
curso, profundizaremos en cómo puede ajustar sus vistas y su código para diferentes dispositivos, tanto en cuanto a su tamaño

49
00:04:23,610 --> 00:04:30,690
como a la plataforma su código se está ejecutando Por ahora, no tendremos ninguna diferencia allí, nos

50
00:04:30,690 --> 00:04:37,640
ajustaremos también en nuestra aplicación para verse bien en estos dos emuladores, pero nuevamente, retomaré esto más adelante.

51
00:04:37,830 --> 00:04:45,900
Entonces, una altura de 90, un relleno hasta la parte superior de 36 para tener algo de espacio en la

52
00:04:45,900 --> 00:04:53,130
parte superior y necesito agregar esto básicamente para hacer frente o cosas como la barra de estado aquí

53
00:04:53,160 --> 00:05:00,200
o esta muesca aquí, por lo tanto, agrego esta parte superior del relleno y también quiero para

54
00:05:00,360 --> 00:05:04,760
agregar un color de fondo aquí y ahora, por supuesto,

55
00:05:04,770 --> 00:05:13,350
es totalmente libre de elegir el color que desee, preparé un color agradable, un código hexadecimal de un color que personalmente me

56
00:05:13,380 --> 00:05:21,450
gusta y ese es # f7287b, que es un color bastante agradable en mi opinión como verás en un segundo.

57
00:05:21,460 --> 00:05:27,250
Ahora también quiero centrar el título y, por lo tanto, usaré alinear elementos y justificar contenido

58
00:05:27,340 --> 00:05:33,280
porque cada vista usa flexbox de forma predeterminada y, por lo tanto, alinear elementos y justificar contenido,

59
00:05:33,280 --> 00:05:39,610
podemos controlar cómo se posicionan los elementos secundarios de la vista dentro de la vista y con el

60
00:05:39,640 --> 00:05:40,780
centro para

61
00:05:40,780 --> 00:05:48,010
alinear elementos y justificar el contenido también establecido en el centro, centramos todos los elementos secundarios o secundarios dentro de la

62
00:05:48,010 --> 00:05:50,680
vista en el centro, tanto horizontal como verticalmente.

63
00:05:50,680 --> 00:05:52,480
Ahora para el título

64
00:05:52,480 --> 00:05:55,640
del encabezado, también quiero configurar algunos estilos para esto.

65
00:05:55,780 --> 00:06:05,230
Entonces, el título del encabezado aquí, debería tener un color negro porque se ajustará a este color aquí y para que podamos leer el

66
00:06:05,260 --> 00:06:11,020
texto y quiero establecer el tamaño de fuente en 18, digamos, para que tengamos esto

67
00:06:11,050 --> 00:06:18,500
arreglado, un poco tamaño de fuente más grande aquí. Con eso, intentemos usar este encabezado y

68
00:06:18,620 --> 00:06:26,550
usémoslo en la aplicación. archivo js aquí. Allí, tenemos esta vista

69
00:06:26,560 --> 00:06:31,070
y esta vista no tiene estilo adjunto.

70
00:06:31,150 --> 00:06:38,050
Voy a cambiar esto y configurar una vista de pantalla aquí y darle a esto una flexión de un atributo.

71
00:06:38,050 --> 00:06:44,090
Ahora podemos asignar esto aquí y Flex One se asegurará de que esta vista tome todo el espacio que

72
00:06:44,140 --> 00:06:49,780
pueda obtener y, dado que es la vista raíz de nuestra aplicación, eso significa que tomará todo el

73
00:06:49,780 --> 00:06:56,770
ancho y la altura que pueda obtener, ocupará todo el espacio pantalla y, por lo tanto, dado que mi encabezado tiene un ancho

74
00:06:56,770 --> 00:07:03,730
del 100%, ya que lo agregaré directamente dentro de esta vista que ahora está configurada para tomar el ancho y la altura

75
00:07:03,730 --> 00:07:06,360
completos, este encabezado también tomará el ancho completo.

76
00:07:06,370 --> 00:07:08,440
Así que ahora solo necesitamos agregar el encabezado aquí,

77
00:07:08,440 --> 00:07:12,480
por supuesto, así que importa el encabezado / components / header, puede

78
00:07:12,580 --> 00:07:20,020
omitir la extensión del archivo y luego simplemente agregar el encabezado como una etiqueta de cierre automático aquí, pero no olvide establecer un

79
00:07:20,020 --> 00:07:25,120
accesorio de título porque recuerde que estamos generando el accesorio de título aquí entre las etiquetas

80
00:07:25,570 --> 00:07:33,120
de texto, por lo que puede agregar un título aquí y lo nombraré adivinar un número porque de eso se trata nuestro juego.

81
00:07:33,120 --> 00:07:39,210
Ahora, si guardamos esto, debería reconstruirse automáticamente y debería ver un encabezado que se ve así en el iPhone y así

82
00:07:39,240 --> 00:07:45,900
en Android y diría que está bien para ambos dispositivos. Una vez más, exploraremos formas de cómo

83
00:07:46,290 --> 00:07:52,320
puede ajustar el aspecto al dispositivo específico en el que se ejecuta su aplicación.