1
00:00:02,470 --> 00:00:05,140
Ahora que trabajamos en el texto

2
00:00:05,140 --> 00:00:11,250
aquí, ahora podemos volver a la aplicación. js y deshazte de este cambio temporal aquí donde siempre

3
00:00:11,250 --> 00:00:12,100
mostramos el

4
00:00:12,100 --> 00:00:17,350
juego en la pantalla, ya no queremos hacerlo, en lugar de eso, queremos comenzar con la pantalla

5
00:00:17,350 --> 00:00:24,790
normal de inicio del juego nuevamente y además de este cambio, ahora también desea hacer un ajuste adicional y ese es el botón de

6
00:00:24,790 --> 00:00:25,720
inicio del juego.

7
00:00:25,810 --> 00:00:31,000
Estamos usando el botón normal aquí, que por supuesto es algo que puede hacer, pero a veces también desea crear

8
00:00:31,000 --> 00:00:35,910
su propio botón, desea tener un control total sobre cómo se ve su botón y para esto, por supuesto,

9
00:00:36,130 --> 00:00:40,610
puede crear el suyo propio botón y eso es exactamente lo que vamos a hacer ahora.

10
00:00:40,950 --> 00:00:45,700
Por lo tanto, en la carpeta de componentes, agregaré mi propio botón y

11
00:00:45,700 --> 00:00:46,390
puede

12
00:00:46,390 --> 00:00:49,400
asignarle el nombre que desee, podría nombrarlo, pero

13
00:00:49,480 --> 00:00:56,740
ese ya es el nombre del incorporado y, por supuesto, aún podría nombrar el suyo como esto, para evitar cualquier conflicto

14
00:00:56,740 --> 00:01:04,330
de nombres o confusión, nombraré mi botón como botón principal porque será mi principal, mi botón principal que usaré para las grandes

15
00:01:04,330 --> 00:01:05,710
acciones en este juego,

16
00:01:05,710 --> 00:01:07,480
como comenzar un nuevo juego.

17
00:01:07,720 --> 00:01:12,730
Ahora ese es el nombre del archivo, tendremos un componente React regular, por

18
00:01:12,730 --> 00:01:14,470
lo tanto, importamos React.

19
00:01:14,590 --> 00:01:18,160
Importamos una vista aquí, ciertamente necesitaremos algo de texto,

20
00:01:18,160 --> 00:01:23,960
sin duda necesitaremos una hoja de estilo de React Native como esta y luego

21
00:01:24,160 --> 00:01:29,990
aquí, tenemos el componente del botón principal que recibe accesorios y que al final devolverá

22
00:01:29,990 --> 00:01:35,290
algo de jsx. Tendremos nuestros estilos objeto con Stylesheet. crear y,

23
00:01:35,470 --> 00:01:39,310
como siempre, exportaremos nuestro botón principal.

24
00:01:39,310 --> 00:01:42,100
Y ahora la pregunta es, ¿cómo construyes tu propio botón?

25
00:01:42,110 --> 00:01:48,640
Ahora puede sonar muy complejo hacer eso, pero en realidad no lo es. Su propio botón también es solo una

26
00:01:48,640 --> 00:01:56,890
combinación de vista y texto y muy importante, también un componente táctil, como resaltado táctil u opacidad táctil

27
00:01:56,890 --> 00:02:01,300
o retroalimentación nativa táctil o incluso táctil sin retroalimentación si

28
00:02:01,360 --> 00:02:06,940
no desea dar retroalimentación visual. Así que aquí iré con una opacidad táctil y

29
00:02:06,940 --> 00:02:13,690
necesitamos eso para dar retroalimentación al usuario sobre el hecho de que se presionó el botón y para registrar un evento

30
00:02:14,320 --> 00:02:19,720
onPress y, aparte de eso, construiremos nuestro botón con una vista que diseñamos de cierta manera

31
00:02:19,720 --> 00:02:21,370
y un texto allí.

32
00:02:21,370 --> 00:02:29,330
Así que ahora aquí en el botón principal, podemos devolver nuestra opacidad táctil y allí, tener una vista que podemos usar para luego diseñar el

33
00:02:29,330 --> 00:02:34,120
botón y allí, tal vez un texto para un texto que debería tener un botón.

34
00:02:34,240 --> 00:02:39,680
Ahora digamos que nuestro botón debe ser utilizable de modo que pasemos un texto directamente entre

35
00:02:39,680 --> 00:02:41,600
las etiquetas de apertura y

36
00:02:41,600 --> 00:02:46,030
cierre de nuestro componente, por lo tanto, aquí podemos usar accesorios para niños

37
00:02:46,300 --> 00:02:55,990
como el texto que quiero mostrar en el botón y luego aquí en esta vista, yo Tendremos un estilo de, digamos, botón de estilos, en este texto interno aquí,

38
00:02:55,990 --> 00:03:04,860
podríamos tener un estilo de texto de botón de estilos y estos nombres dependen de usted, por supuesto, y en la opacidad táctil, agregaré el oyente

39
00:03:04,930 --> 00:03:07,920
onPress y nosotros Tendré que hacer algo allí.

40
00:03:09,000 --> 00:03:11,430
Entonces, ahora tenemos el esqueleto de nuestro botón,

41
00:03:11,450 --> 00:03:13,700
ahora podemos comenzar a agregarle algunos estilos.

42
00:03:13,790 --> 00:03:18,450
Ahora, por supuesto, puede diseñar ese botón de la forma que desee, tengo un

43
00:03:18,470 --> 00:03:20,410
cierto estilo en mente aquí

44
00:03:20,420 --> 00:03:24,490
que agregaré, pero nuevamente, definitivamente juegue con eso y aplique sus propios estilos.

45
00:03:24,530 --> 00:03:30,620
Entonces, para el botón en sí, que es la vista alrededor del texto, quiero darle al botón un cierto color

46
00:03:30,620 --> 00:03:34,850
de fondo y también podría asegurarse de que esto se pueda configurar desde fuera,

47
00:03:42,270 --> 00:03:48,960
por supuesto, puede ser realmente creativo aquí. Codificaré un color aquí, por supuesto, usando mis colores constantes aquí. Así que importaré colores de

48
00:03:49,100 --> 00:03:55,710
constantes / Colores, colores como este y luego usaré colores primarios, tal vez el color primario.

49
00:03:55,790 --> 00:04:00,380
Entonces, ese es el color de fondo que debería tener este botón, de nuevo, también puedes asegurarte de

50
00:04:00,380 --> 00:04:04,090
que este estilo esté configurado dinámicamente con la ayuda de algún accesorio que obtengas

51
00:04:04,160 --> 00:04:06,290
del exterior, pero aquí, lo codificaré aquí.

52
00:04:06,290 --> 00:04:11,180
Además de eso, el botón debe tener algo de relleno para que el texto no se

53
00:04:11,270 --> 00:04:13,130
asiente directamente en los bordes

54
00:04:13,130 --> 00:04:19,310
del contenedor del botón, por lo que en el cuadro alrededor del texto, pero hay algo de espacio y puede usar

55
00:04:19,310 --> 00:04:22,590
el mismo relleno en todas las direcciones pero quiero usar un

56
00:04:22,640 --> 00:04:29,300
relleno vertical de 12, por lo que no hay mucho relleno en la parte superior e inferior y un relleno horizontal de

57
00:04:29,300 --> 00:04:32,550
digamos 30, así que mucho más relleno a izquierda y derecha.

58
00:04:32,710 --> 00:04:36,830
Ese es el botón, ahora para el texto del botón, también existe el

59
00:04:36,880 --> 00:04:41,500
color blanco que debería verse bien en nuestro color primario, también podría usar el negro porque

60
00:04:41,500 --> 00:04:47,290
nuestro color primario en realidad es un color donde, como puede ver, tanto blanco como blanco el negro realmente funciona,

61
00:04:47,410 --> 00:04:49,480
por lo que puede usar cualquiera

62
00:04:49,480 --> 00:04:55,840
de los dos, pero iré con el blanco aquí para el botón y agregaré una familia de fuentes de sans abiertos para

63
00:04:55,840 --> 00:05:01,780
usar esta fuente personalizada también, como aprendió, debe configurar esto en cada texto, no hay herencia, no hay una fuente

64
00:05:01,780 --> 00:05:07,150
global que pueda configurar, cada texto que debe usar esta fuente necesita obtenerla y agregaré un tamaño de

65
00:05:07,150 --> 00:05:15,840
fuente de digamos 18 para tener un texto más grande aquí en este botón . Ahora, cuando se presiona el botón, entonces, por supuesto,

66
00:05:15,840 --> 00:05:21,720
normalmente no quiero manejar este evento de presión dentro del botón, sino dentro

67
00:05:21,720 --> 00:05:24,990
del componente donde usamos el botón.

68
00:05:25,110 --> 00:05:27,160
Por lo tanto, simplemente quiero reenviarlo

69
00:05:27,180 --> 00:05:33,330
y para eso, simplemente podemos esperar obtener una referencia de función, una función de controlador de eventos en digamos onPress

70
00:05:33,330 --> 00:05:36,490
prop de nuestro botón personalizado, pero podría nombrar este accesorio

71
00:05:36,510 --> 00:05:41,670
de cualquier manera, podría nombrarlo en Click porque en Al final, eres tú quien usa tu

72
00:05:41,670 --> 00:05:42,510
propio botón

73
00:05:42,600 --> 00:05:48,540
y allí solo tienes que asegurarte de pasar una referencia de función de ajuste, un puntero de ajuste en

74
00:05:48,540 --> 00:05:54,310
una función de controlador de eventos a onPress o lo que sea que le pongas en tu propio botón.

75
00:05:54,360 --> 00:05:55,680
Así que este nombre

76
00:05:55,680 --> 00:05:58,610
depende de usted, ahora usemos el botón principal y usémoslo en

77
00:05:58,610 --> 00:06:02,170
la pantalla de inicio del juego. Allí podemos simplemente importarlo,

78
00:06:02,190 --> 00:06:13,230
así que importa el botón principal de los componentes / MainButton y este botón principal ahora se usa aquí para comenzar un nuevo

79
00:06:13,230 --> 00:06:14,170
juego.

80
00:06:14,230 --> 00:06:16,980
Así que reemplazaré el botón aquí con el botón

81
00:06:16,980 --> 00:06:23,610
principal, pero tenga en cuenta que en este botón, configuré el contenido, el texto que se mostrará de modo que en realidad

82
00:06:23,610 --> 00:06:31,440
sea el contenido que se pasa entre las etiquetas de apertura y cierre de nuestro botón y, por lo tanto, hacia atrás en la pantalla de

83
00:06:31,440 --> 00:06:32,790
inicio del juego,

84
00:06:32,790 --> 00:06:38,760
el título aquí ya no se pasa en un accesorio de título, sino que ahora tenemos una etiqueta de apertura

85
00:06:38,760 --> 00:06:42,730
y cierre para nuestro propio botón y agregamos el juego de inicio allí.

86
00:06:44,110 --> 00:06:50,170
Ahora onPress sigue siendo un accesorio que dejamos aquí porque en el botón principal, reenvío el evento onPress, por así

87
00:06:50,230 --> 00:06:54,520
decirlo, a la función que obtengo en mi propio accesorio onPress aquí, por lo

88
00:06:54,520 --> 00:07:00,870
tanto, tenemos que configurar el accesorio onPress en nuestro propio botón y, por lo tanto, con eso, deberíamos tener un buen

89
00:07:00,870 --> 00:07:04,500
botón principal aquí, un buen botón cuando comenzamos un nuevo juego.

90
00:07:07,840 --> 00:07:09,280
Intentemos esto aquí, así

91
00:07:09,310 --> 00:07:13,680
es como se ve y eso se ve bastante bien en mi opinión, un buen botón.

92
00:07:13,900 --> 00:07:15,080
Sin embargo, no

93
00:07:15,220 --> 00:07:19,360
he terminado, quiero tener esquinas redondeadas en ese botón y para eso, de

94
00:07:19,360 --> 00:07:24,640
vuelta en el archivo del botón principal, podemos, por supuesto, simplemente ir a esta propiedad del

95
00:07:24,640 --> 00:07:32,650
botón aquí en la hoja de estilo, que es el objeto de estilo que se aplica a nuestro vista y allí, podemos agregar un radio

96
00:07:32,650 --> 00:07:39,210
de borde de 25 y si lo hacemos, verá que si ahora obtengo este botón, ahora tiene este aspecto agradable aquí.

97
00:07:39,450 --> 00:07:45,580
También le permite mostrarlo en Android, ahora tiene esquinas redondeadas y tiene este agradable efecto de opacidad cuando lo toca

98
00:07:45,580 --> 00:07:46,120
y,

99
00:07:46,270 --> 00:07:51,680
por cierto, como ya se mencionó anteriormente, puede cambiar este efecto de opacidad yendo al componente de

100
00:07:51,730 --> 00:07:58,080
opacidad táctil y allí, puede establezca la opacidad activa al nivel de opacidad que desea tener cuando se presiona, por

101
00:07:58,120 --> 00:07:59,090
ejemplo, si usa

102
00:07:59,140 --> 00:08:04,040
un valor bastante alto aquí, entonces este efecto es menos fuerte, ahora es solo ligeramente

103
00:08:04,060 --> 00:08:10,930
transparente cuando lo tocamos y no tan transparente como antes de. Pero eso es totalmente de usted lo

104
00:08:10,930 --> 00:08:11,980
que

105
00:08:11,980 --> 00:08:15,530
quiere aquí, iré por. 6 aquí para tener un efecto

106
00:08:15,610 --> 00:08:21,130
ligeramente más fuerte, pero de nuevo eso es algo que puedes configurar y, en general, mi sugerencia sería que juegues con

107
00:08:21,130 --> 00:08:28,950
eso y veas cómo puedes diseñar ese botón, cómo puedes realmente ajustarlo a tus necesidades. Ahora con el botón personalizado agregado, también quiero

108
00:08:28,950 --> 00:08:31,140
usarlo en el juego

109
00:08:31,140 --> 00:08:33,170
sobre la pantalla,

110
00:08:33,270 --> 00:08:42,380
así que allí, también importaré el botón principal de componentes / MainButton como este y luego simplemente agregaré

111
00:08:42,610 --> 00:08:49,110
ese botón principal aquí cuando muestremos nuestro nuevo botón de juego ahí abajo.

112
00:08:49,120 --> 00:08:53,620
Utilice el botón principal en su lugar, por lo tanto, elimine el accesorio de título porque

113
00:08:53,620 --> 00:08:55,710
no es así como estamos configurando el

114
00:08:55,720 --> 00:09:02,840
título en nuestro propio botón personalizado, sino que tenemos que pasarlo aquí entre las etiquetas de apertura y cierre de nuestras etiquetas de componentes personalizados.

115
00:09:03,040 --> 00:09:11,950
Por lo tanto, ahora aquí, esto también debería verse mejor si terminamos rápidamente un juego aquí, tratando de que la computadora adivine

116
00:09:11,950 --> 00:09:13,540
33, aquí estamos

117
00:09:17,550 --> 00:09:20,730
y ahora vemos el botón agradable aquí también.

118
00:09:20,730 --> 00:09:24,540
También vemos la salida correcta aquí con respecto al número de rondas

119
00:09:24,540 --> 00:09:25,440
que tomó

120
00:09:25,440 --> 00:09:30,510
y el número que teníamos que adivinar, y podemos comenzar un nuevo juego a partir de entonces

121
00:09:36,440 --> 00:09:44,900
y volver a pasar por eso muy rápido, sí, todo se ve muy bien.

122
00:09:44,900 --> 00:09:46,520
Lo que me queda por hacer ahora es trabajar en estos dos botones, inferior y superior.

123
00:09:46,520 --> 00:09:48,230
Parecen un poco aburridos,

124
00:09:48,290 --> 00:09:54,200
diría, ciertamente podemos hacer que se vean más emocionantes. Ahora, una forma de hacer que se vean un poco más

125
00:09:54,200 --> 00:09:56,690
emocionantes es que también usemos nuestro botón personalizado allí.

126
00:09:57,020 --> 00:10:04,710
Entonces, por supuesto, aquí en la pantalla del juego, también podemos importar el botón principal de los componentes / MainButton, por lo que nuestro

127
00:10:04,730 --> 00:10:09,650
propio botón personalizado y usarlo en lugar del botón que estamos usando actualmente, que está

128
00:10:09,660 --> 00:10:12,070
integrado en uno. Así que use

129
00:10:12,200 --> 00:10:17,770
nuestro propio botón aquí, por lo tanto, por supuesto, mueva el título entre las

130
00:10:17,870 --> 00:10:24,710
etiquetas de apertura y cierre, así que aquí está más abajo y luego aquí para el segundo botón, eso

131
00:10:25,220 --> 00:10:31,610
es mayor y ahora esto debería verse un poco mejor si comenzamos un nuevo juego aquí .

132
00:10:31,640 --> 00:10:35,470
Ahora usamos nuestros botones personalizados aquí, aunque ahora también vemos un problema,

133
00:10:35,590 --> 00:10:39,440
simplemente son demasiado grandes, están demasiado cerca el uno del otro, sin

134
00:10:39,530 --> 00:10:44,540
embargo, podemos cambiar eso yendo al contenedor de botones y dándole un poco más ancho, quizás

135
00:10:44,540 --> 00:10:47,550
establezca el ancho máximo al 90% aquí en realidad.

136
00:10:47,560 --> 00:10:53,490
Entonces, si intentamos esto de nuevo, sí, eso se ve un poco mejor, hay al menos algo de espacio entre los botones

137
00:10:53,490 --> 00:10:58,380
y por ahora esto funcionará porque por ahora, no estamos optimizando para todos los tamaños de pantalla.

138
00:10:58,530 --> 00:11:04,140
También aumentemos este ancho aquí a 400 para que tengamos suficiente ancho, en realidad

139
00:11:04,140 --> 00:11:09,160
usamos 400 píxeles y ahora esto se ve bien aquí en iOS y

140
00:11:12,590 --> 00:11:15,880
también en Android. Ahora eso se ve un

141
00:11:15,890 --> 00:11:22,700
poco mejor como mencioné, pero no sería bueno si tuviéramos íconos allí, en lugar de texto porque el texto, por supuesto, funciona, pero un ícono

142
00:11:22,700 --> 00:11:24,650
también podría funcionar y no hemos usado

143
00:11:24,650 --> 00:11:30,830
íconos hasta ahora sin embargo, a menudo los necesitas en aplicaciones móviles. Definitivamente es algo que también debe tener en

144
00:11:30,830 --> 00:11:36,980
cuenta, debe saber cómo trabajar con iconos, cómo agregar iconos dentro de su aplicación y eso

145
00:11:36,980 --> 00:11:39,370
es lo que haremos a continuación.