1
00:00:02,390 --> 00:00:05,610
Entonces, paso a paso, estamos progresando, lo que no

2
00:00:05,660 --> 00:00:08,150
podemos hacer es ingresar un número.

3
00:00:08,150 --> 00:00:14,090
Bueno, supongo que técnicamente podemos ingresar un número si encontramos el campo de entrada, aquí está, pero no

4
00:00:14,090 --> 00:00:17,920
es muy divertido buscarlo, sería mejor si pudieras verlo, ¿no?

5
00:00:18,680 --> 00:00:22,270
Por lo tanto, diseñemos un poco ese campo

6
00:00:22,280 --> 00:00:30,470
de entrada, ese campo de entrada de texto aquí, y al igual que antes, lo hice en un componente

7
00:00:30,470 --> 00:00:31,260
separado.

8
00:00:31,310 --> 00:00:40,520
Entonces, en la carpeta de componentes, agregaré mi propia entrada. js y allí, como siempre importa React from React y luego importa

9
00:00:40,520 --> 00:00:46,580
la entrada de texto de React Native y aquí realmente no necesitaré la vista porque tendremos

10
00:00:46,580 --> 00:00:51,970
la entrada de texto aquí con estilo y configurada allí y luego tendremos el

11
00:00:51,970 --> 00:00:59,880
entrada constante aquí, que es nuestro componente funcional, que al final también exportamos, por supuesto, y una cosa que necesitaremos con

12
00:00:59,880 --> 00:01:01,980
certeza es la hoja de

13
00:01:02,280 --> 00:01:08,550
estilo porque ahora debería diseñarse aquí para que tengamos un aspecto de entrada predeterminado que podamos reutilizar

14
00:01:08,550 --> 00:01:13,710
en este aplicación si necesitábamos múltiples entradas en diferentes lugares y esa es

15
00:01:13,710 --> 00:01:15,120
realmente la mentalidad

16
00:01:15,120 --> 00:01:20,130
en la que tiene que entrar, crear componentes reutilizables para que no tenga

17
00:01:20,130 --> 00:01:26,460
que copiar el código o repetirlo, sino que pueda compartir fácilmente sus componentes y crear fácilmente las

18
00:01:26,460 --> 00:01:32,700
aplicaciones que desea de su conjunto de bloques de creación que crea por su cuenta al final.

19
00:01:32,700 --> 00:01:41,650
Así que aquí, mis estilos se oponen con Stylesheet. crear, así, se ve bien y ahora en ese componente, quiero devolver

20
00:01:41,710 --> 00:01:44,230
una entrada de texto, por

21
00:01:44,230 --> 00:01:46,990
lo que esta entrada de texto incorporada.

22
00:01:46,990 --> 00:01:49,830
Ahora, por supuesto, mi idea es que podamos

23
00:01:49,870 --> 00:01:58,180
diseñarlo desde aquí, así que asignemos un estilo desde allí, pero al igual que con la tarjeta, sería bueno si también pudiéramos establecer un estilo desde el

24
00:01:58,180 --> 00:02:05,200
exterior, como un ancho especial o un borde especial, algo así. Para habilitar eso, nuevamente pasaré un objeto aquí

25
00:02:05,380 --> 00:02:08,050
al estilo y, por mi parte,

26
00:02:08,050 --> 00:02:14,470
tomo todos mis estilos configurados en mi objeto de estilos y, digamos, en una propiedad de

27
00:02:14,470 --> 00:02:23,970
entrada que aún tenemos que agregar y, además, también agregamos todos los estilos que estamos obteniendo del estilo de accesorios para que podamos establecer

28
00:02:23,970 --> 00:02:30,060
estilos desde el exterior también y ahora en la hoja de estilo, podemos agregar el estilo

29
00:02:30,060 --> 00:02:37,180
de entrada para asignar un estilo a la entrada. Así que aquí, podríamos darle a esto una altura de digamos 30,

30
00:02:37,180 --> 00:02:43,420
que debería ser una altura que se vea relativamente bien y para ver algo, también quiero agregar un borde en la parte inferior.

31
00:02:43,450 --> 00:02:49,120
También puede agregar un borde alrededor de la entrada completa con el color del borde y el ancho del borde,

32
00:02:49,310 --> 00:02:54,970
etc., pero me gusta esa apariencia donde solo tenemos un borde debajo de la entrada, pero eso es, por supuesto,

33
00:02:55,060 --> 00:02:59,120
totalmente subjetivo y algo que puede configurar de acuerdo con sus preferencias personales. .

34
00:02:59,250 --> 00:03:06,160
Solo se puede establecer un borde en la parte inferior con el color del borde inferior y allí iré

35
00:03:06,160 --> 00:03:16,110
con gris, otro color prefabricado que podemos usar con ese atajo y darle a este borde inferior también un ancho aquí de uno, agregue un margen vertical

36
00:03:16,110 --> 00:03:22,680
de 10 para tener algo de espacio alrededor de la entrada, al menos en la parte superior

37
00:03:22,890 --> 00:03:26,380
e inferior y ahora con eso, el estilo base

38
00:03:26,400 --> 00:03:28,170
para esta entrada de

39
00:03:28,170 --> 00:03:36,660
texto está hecho, ahora usemos eso en la pantalla del juego. Entonces, allí, quiero importar mi propia entrada de la entrada de la

40
00:03:36,660 --> 00:03:39,890
carpeta de componentes, así y reemplazar esta entrada de

41
00:03:40,930 --> 00:03:46,690
texto aquí con mi propia entrada que al final envuelve esta entrada de texto incorporada, por

42
00:03:46,690 --> 00:03:47,440
supuesto.

43
00:03:47,500 --> 00:03:48,510
Así que use

44
00:03:48,510 --> 00:03:52,300
mi propia entrada, elimine la entrada de entrada de texto que ya

45
00:03:52,600 --> 00:03:59,370
no necesitamos y ahora, si guardamos esto, lo vemos un poco, pero es muy pequeño, apenas puede verlo aquí en iOS y se

46
00:03:59,410 --> 00:04:04,600
vuelve más grande a medida que escribes, lo que ciertamente no es lo que queremos, por supuesto.

47
00:04:04,900 --> 00:04:06,590
Por supuesto, no hemos terminado, en

48
00:04:07,200 --> 00:04:09,290
lugar de diseñar el ancho, iré a la

49
00:04:09,300 --> 00:04:10,950
pantalla de inicio del juego, así

50
00:04:10,980 --> 00:04:14,460
que al lugar donde usamos la entrada y configuramos el estilo aquí porque

51
00:04:14,460 --> 00:04:19,200
para mí tiene sentido que tengamos algo general estilos que siempre queremos en el componente de entrada,

52
00:04:19,380 --> 00:04:24,720
algo así como la altura o el borde, pero algunos estilos específicos, como qué tan grande debe ser, entonces

53
00:04:24,720 --> 00:04:25,230
qué

54
00:04:25,350 --> 00:04:28,480
tan ancho debe ser, eso es algo que desea configurar en

55
00:04:28,650 --> 00:04:36,150
el lugar donde realmente usa y, por lo tanto, aquí, agregaré esta propiedad de entrada en el objeto de hoja de estilo de la pantalla de inicio del

56
00:04:36,150 --> 00:04:42,360
juego y tal vez use un ancho de 50 píxeles aquí, eso debería verse bien y asignarlo a mi entrada personalizada aquí con

57
00:04:42,450 --> 00:04:43,760
el accesorio de estilo.

58
00:04:43,830 --> 00:04:51,840
Entonces, ahora podemos señalar estilos. entrada y con eso, tendrá ese ancho en todo

59
00:04:51,840 --> 00:04:55,380
momento y si escribimos allí, ya no

60
00:04:55,380 --> 00:05:00,040
lo ampliamos, sino que simplemente podemos desplazarnos automáticamente en esa entrada.

61
00:05:00,150 --> 00:05:05,760
Ahora, para esta entrada específica, para este diseño específico aquí, también sería bueno si el texto estuviera

62
00:05:05,760 --> 00:05:06,500
centrado,

63
00:05:06,600 --> 00:05:12,330
creo, para la mayoría de las entradas desea ese comportamiento predeterminado de escribir de izquierda a derecha y

64
00:05:12,330 --> 00:05:13,220
comenzar en el

65
00:05:13,260 --> 00:05:20,480
borde izquierdo, pero aquí creo un poco de texto centrado sería bueno y, por lo tanto, en la pantalla de inicio del juego

66
00:05:20,480 --> 00:05:23,550
donde quiero tener este centrado aquí, en esta entrada,

67
00:05:23,660 --> 00:05:30,470
también podemos agregar la propiedad de alineación de texto y establecerla en el centro y ahora esto centrará este texto aquí

68
00:05:30,470 --> 00:05:32,330
en el medio como escribimos

69
00:05:32,330 --> 00:05:35,830
y eso es realmente bueno para ingresar un número, así, así.

70
00:05:36,920 --> 00:05:40,260
Hablando de eso, en este momento podemos ingresar cualquier

71
00:05:40,550 --> 00:05:45,980
cosa allí, por lo que sin duda necesitamos configurar esta entrada y para eso si voy

72
00:05:45,980 --> 00:05:52,250
al componente de entrada donde usamos la entrada de texto, hay muchas cosas que podemos configurar allí y realmente

73
00:05:52,250 --> 00:05:59,030
el mejor recurso siempre es, por supuesto, la documentación oficial. Allí en los documentos de la API, si vas allí y

74
00:05:59,030 --> 00:06:05,990
buscas la entrada de texto, encontrarás no solo una explicación, sino que también encontrarás todos los accesorios que puedes configurar allí y puedes

75
00:06:06,320 --> 00:06:09,230
configurar cosas como si son multilínea o no ,

76
00:06:09,230 --> 00:06:11,100
cuánto puede durar el texto.

77
00:06:11,330 --> 00:06:13,730
También puede establecer un texto de

78
00:06:13,730 --> 00:06:18,700
marcador de posición, puede establecer la autocorrección y todas esas cosas divertidas, así

79
00:06:18,770 --> 00:06:25,670
que definitivamente revise estos documentos para encontrar la propiedad específica que pueda necesitar para su caso de uso.

80
00:06:25,730 --> 00:06:31,970
Quiero poder configurar estos accesorios, pero quiero poder configurarlos desde el lugar

81
00:06:31,970 --> 00:06:37,640
donde uso mi entrada personalizada. Entonces, no desde aquí porque eso aseguraría que usemos

82
00:06:37,730 --> 00:06:40,150
la misma configuración para todas las entradas

83
00:06:40,430 --> 00:06:46,550
que podamos tener en nuestra aplicación, quiero tener más flexibilidad y simplemente configurar un estilo base aquí y configurar

84
00:06:46,550 --> 00:06:51,440
la entrada en el lugar donde luego úselo en lugar del componente de envoltura central.

85
00:06:51,440 --> 00:06:57,140
Lo bueno es React y eso no es React Native, solo React en JavaScript normal tiene una

86
00:06:57,140 --> 00:06:58,200
sintaxis para eso.

87
00:06:58,460 --> 00:07:05,920
Puede tomar sus accesorios que está obteniendo y distribuirlos en su componente de esta manera.

88
00:07:05,920 --> 00:07:11,110
La sintaxis puede parecer un poco extraña, pero lo que al final hace es

89
00:07:11,140 --> 00:07:19,120
que toma todos los accesorios que tienes, todos los accesorios que configuras aquí y básicamente los agrega a tu componente como accesorios.

90
00:07:19,150 --> 00:07:23,600
Ahora, si luego define otros accesorios como estilo y ya tiene un estilo aquí, este

91
00:07:23,650 --> 00:07:26,020
estilo anulará el estilo que tiene aquí

92
00:07:26,040 --> 00:07:31,210
y eso es realmente lo que quiero porque si configuro un accesorio de estilo en mi propia entrada

93
00:07:31,210 --> 00:07:37,450
desde el exterior, definitivamente desea anular esto con este accesorio de estilo y agregar este estilo que está configurado allí para esta

94
00:07:37,450 --> 00:07:38,200
entrada de

95
00:07:38,200 --> 00:07:43,630
texto, pero si configura otros accesorios fuera de este componente, entonces en mi componente personalizado, se agregarán a la

96
00:07:43,630 --> 00:07:49,010
entrada de texto y eso nos permite agregar todos los accesorios que podemos agregar en la entrada de texto

97
00:07:49,120 --> 00:07:52,120
también en nuestra entrada, así como en nuestro propio componente.

98
00:07:52,120 --> 00:08:03,400
Entonces, aquí, donde usamos la entrada, ahora no solo podemos agregar el estilo, sino que también podemos agregar blurOnSubmit, por ejemplo, para

99
00:08:03,400 --> 00:08:09,670
asegurarnos de que cuando presionamos el botón Enviar allí, perdamos el foco

100
00:08:09,670 --> 00:08:16,430
y cerremos el teclado virtual. Podemos configurar autocapitalizar a none, que es uno de los valores permitidos

101
00:08:16,480 --> 00:08:20,040
allí si verifica los documentos. Puede establecerlo en ninguno, oraciones,

102
00:08:20,050 --> 00:08:24,610
palabras, etc., por lo que no quiero activar las mayúsculas aquí porque solo ingresaremos el número,

103
00:08:24,610 --> 00:08:30,610
sino también porque quiero mostrarle las diferentes configuraciones que puede establecer. Estableceré autocorrección aquí en falso para que

104
00:08:30,610 --> 00:08:35,050
no corrijamos automáticamente la entrada del usuario y muy importante aquí, estableceré

105
00:08:35,080 --> 00:08:41,000
el tipo de teclado en numérico, para que el usuario tenga que ingresar un número aquí.

106
00:08:41,320 --> 00:08:47,590
Estableceré la longitud máxima aquí en 2 para que solo puedas ingresar dos dígitos y no un número muy largo

107
00:08:47,620 --> 00:08:53,890
porque este juego aquí y es solo una de las restricciones que tengo aquí, es que este juego solo funciona

108
00:08:53,890 --> 00:08:57,140
con dos dígitos número. Con todo eso configurado,

109
00:08:57,140 --> 00:09:02,990
ahora si volvemos y alterno mi teclado virtual, verá que obtiene ese teclado numérico aquí y solo

110
00:09:02,990 --> 00:09:09,180
puede ingresar dos dígitos allí y no más que eso, que por supuesto es exactamente lo que quiero.

111
00:09:09,260 --> 00:09:14,170
Además, aquí en Android vemos esto, si hace clic en el botón de confirmación, esto

112
00:09:14,180 --> 00:09:21,140
lo cerrará, eso es gracias a esa cosa blurOnSubmit. En iOS, dicho botón no existe aquí, así que allí, en realidad, tendremos

113
00:09:21,140 --> 00:09:25,730
que encontrar una solución diferente para cerrar esto si toca en otro lugar, por ejemplo, porque en este

114
00:09:25,760 --> 00:09:27,150
momento, eso no está sucediendo.

115
00:09:27,320 --> 00:09:32,090
Pero lo bueno es que ahora tenemos un teclado que podemos ver y un teclado donde podemos ingresar números.

116
00:09:32,090 --> 00:09:37,910
Sin embargo, una cosa que quiero cambiar es que ahora mismo, también puedo ingresar un separador decimal aquí.

117
00:09:37,910 --> 00:09:44,420
Ahora, para deshacerse de eso, puede cambiar el tipo de teclado a teclado numérico y ver todos los tipos de teclado disponibles, como siempre

118
00:09:44,420 --> 00:09:49,650
los documentos oficiales son el lugar para ir, allí para la entrada de texto, puede sumergirse en un tipo

119
00:09:49,650 --> 00:09:54,650
de teclado y buscar averiguar qué puede configurar, qué funciona en todas las plataformas y qué podría configurar

120
00:09:54,650 --> 00:09:59,480
si tuviera un control que verifique en qué plataforma está ejecutando el código del que aún no hemos

121
00:09:59,480 --> 00:09:59,990
aprendido.

122
00:10:00,230 --> 00:10:03,200
Sin embargo, el teclado numérico es compatible con ambas plataformas

123
00:10:03,350 --> 00:10:08,380
y si configura esto, ahora tiene una entrada donde no puede ingresar un lugar decimal aquí, si

124
00:10:08,390 --> 00:10:13,990
escribe aquí y no puede hacerlo en iOS. Sin embargo, en Android, lamentablemente puede hacerlo, por lo que

125
00:10:14,090 --> 00:10:16,490
también tendremos que encontrar una solución diferente.