1
00:00:02,260 --> 00:00:07,540
Entonces, para eso, como mencioné, estoy de vuelta en el proyecto en el que trabajamos y, por supuesto, ahora

2
00:00:07,540 --> 00:00:09,640
la pantalla de edición del producto aquí

3
00:00:09,640 --> 00:00:16,060
es lo que me interesa, esta es la pantalla donde tengo estas entradas de texto aquí con mis etiquetas y luego el entrada

4
00:00:16,060 --> 00:00:19,540
de texto, donde actualmente tenemos un manejo de entrada muy básico, al

5
00:00:19,540 --> 00:00:25,390
menos estamos obteniendo la entrada del usuario y almacenándola con la ayuda del estado React, con el gancho de estado

6
00:00:25,450 --> 00:00:26,460
de uso,

7
00:00:26,560 --> 00:00:30,200
luego estamos ingresando los valores de Android en la entrada y eso es.

8
00:00:30,310 --> 00:00:37,210
Esto nos permite capturar y usar la entrada del usuario, pero por un lado, podemos mejorar la forma en que lo

9
00:00:37,210 --> 00:00:42,730
hacemos, podemos escribir esto de una manera más reutilizable y no estamos haciendo ninguna validación, por lo

10
00:00:42,760 --> 00:00:46,510
que estas son las cosas que quiero cambiar en este módulo

11
00:00:46,530 --> 00:00:50,850
Además, tampoco estamos configurando nuestras entradas de ninguna manera, eso significa que en este

12
00:00:50,940 --> 00:00:53,850
momento todas las entradas de texto son iguales.

13
00:00:53,850 --> 00:00:57,140
No cambiamos el tipo de teclado que estamos

14
00:00:57,270 --> 00:01:02,910
presentando, no estamos ofreciendo entradas de varias líneas, por ejemplo, para textos más largos como aquí

15
00:01:02,910 --> 00:01:08,370
para la descripción, nada de eso está sucediendo y, por lo tanto, comencemos configurando estas

16
00:01:08,370 --> 00:01:15,120
entradas antes de continuar a validación y así sucesivamente. Una configuración importante que puede agregar a sus teclados

17
00:01:15,180 --> 00:01:21,420
es el tipo de teclado. Se puede configurar el tipo de teclado y allí tienes un par de valores disponibles. Ahora tiene bastantes valores aquí,

18
00:01:21,420 --> 00:01:26,970
pero los documentos oficiales también son un lugar que debe consultar cuando piense en el tipo que

19
00:01:26,970 --> 00:01:33,230
desea asignar aquí porque cuando visita la documentación oficial de entrada de texto, por supuesto, ve algunos ejemplos, pero

20
00:01:33,230 --> 00:01:38,270
luego también puede ver todos los accesorios que tiene y allí, puede aprender más sobre

21
00:01:38,270 --> 00:01:41,450
cada accesorio y cómo puede configurarlo y, por ejemplo, para

22
00:01:41,450 --> 00:01:46,010
el tipo de teclado, aprendimos que solo estos tipos son compatibles con plataformas cruzadas.

23
00:01:46,160 --> 00:01:52,080
Entonces, si bien tenemos tipos específicos de iOS y Android disponibles, estos tipos solo se pueden usar junto con una

24
00:01:52,130 --> 00:01:53,750
verificación de plataforma para asegurarse de

25
00:01:53,750 --> 00:01:58,310
no usar el tipo en Android que no es compatible allí y que, por lo tanto,

26
00:01:58,310 --> 00:01:59,560
no tendría efecto.

27
00:02:00,230 --> 00:02:06,430
Por lo tanto, me atendré a los tipos de plataforma cruzada, para no tener que agregar una verificación de plataforma adicional y allí, por

28
00:02:06,440 --> 00:02:11,600
lo general, digamos texto normal, mantendríamos el valor predeterminado, que por lo tanto es un tipo que no tenemos que

29
00:02:11,600 --> 00:02:18,110
asignar pero eso, por ejemplo, cambia cuando miramos nuestra entrada de precios. Ahí quiero asegurarme de que las personas solo ingresen números

30
00:02:18,110 --> 00:02:24,860
válidos, que no ingresen ningún texto y, por lo tanto, por supuesto, quiero mostrar el teclado correcto para ayudarlos con

31
00:02:24,860 --> 00:02:27,850
esto y si echamos un vistazo a la documentación

32
00:02:28,130 --> 00:02:33,170
oficial, vemos que hay tres tipos principales de teclados multiplataforma que podemos mostrar: teclado numérico,

33
00:02:33,350 --> 00:02:40,460
teclado decimal y numérico y, por ejemplo, el teclado decimal es una entrada que permite al usuario ingresar números decimales, que es

34
00:02:40,460 --> 00:02:46,250
justo lo que quiero aquí por mi precio. Por lo tanto, configurar este tipo de teclado

35
00:02:46,250 --> 00:02:50,660
aquí tiene mucho sentido porque ahora, si echamos un vistazo a esta

36
00:02:51,080 --> 00:02:58,460
entrada de precio aquí y alterno el teclado virtual que puede hacer con el atajo de comando k aquí en iOS

37
00:02:58,520 --> 00:03:07,340
o con el menú de hardware allí, luego teclado, alternar teclado de software, ves que ahora tengo este teclado decimal que se abre aquí, mientras

38
00:03:07,340 --> 00:03:12,860
que en las otras entradas, tengo un teclado de texto normal y, por supuesto, eso es

39
00:03:13,220 --> 00:03:14,750
lo mismo en Android.

40
00:03:14,750 --> 00:03:20,590
Si vamos al administrador allí y luego miramos el precio, también vemos que allí, se nos presenta esta entrada amigable

41
00:03:20,590 --> 00:03:26,200
con el número en lugar del teclado de texto normal que obtenemos en los otros campos de entrada.

42
00:03:26,480 --> 00:03:33,840
Así es como podemos configurar esto y, por supuesto, esta es una configuración importante. También podemos configurar otras cosas, por

43
00:03:34,010 --> 00:03:38,840
ejemplo aquí en la entrada del título aquí.

44
00:03:39,060 --> 00:03:43,950
Si presiona el espacio de control y observa el autocompletado, verá que hay un montón de cosas que

45
00:03:43,950 --> 00:03:49,560
puede configurar, por ejemplo, si esto debería auto capitalizarse. Allí tiene diferentes valores que puede

46
00:03:49,560 --> 00:03:55,590
establecer, por ejemplo, ese carácter debe estar en mayúscula, solo oraciones o palabras completas

47
00:03:55,590 --> 00:04:01,020
y aquí, buscaré oraciones completas, por ejemplo, para ayudar a ponerlas en mayúsculas.

48
00:04:01,140 --> 00:04:07,350
También puede activar la autocorrección y al agregarla de esta manera, se asegura de que la corrección automática

49
00:04:07,350 --> 00:04:12,540
esté activada para esta entrada, al configurarla como falsa, puede desactivarla o simplemente omitirla, por

50
00:04:12,540 --> 00:04:18,120
supuesto, esa también es una opción, etc. . Hay un montón de cosas que puede configurar

51
00:04:18,120 --> 00:04:23,730
y le recomiendo, como siempre, que eche un vistazo a los documentos oficiales y que aprenda sobre

52
00:04:23,790 --> 00:04:25,930
las opciones de configuración disponibles y

53
00:04:25,980 --> 00:04:32,400
lo que hacen, también simplemente juegue con ellas para obtener un idea de lo que puede hacer allí y qué

54
00:04:32,400 --> 00:04:40,090
hace cada opción y qué podría tener sentido para su próxima aplicación. Otro valor que quiero establecer, por ejemplo, es el

55
00:04:40,090 --> 00:04:42,580
tipo de clave de retorno.

56
00:04:42,580 --> 00:04:44,920
Esto se puede establecer en un par

57
00:04:44,980 --> 00:04:50,350
de valores y, de nuevo, si verifica los documentos oficiales, aprenderá que no todos los valores están

58
00:04:50,440 --> 00:04:56,260
disponibles en todas las plataformas, solo estos cinco son multiplataforma disponibles y allí, básicamente, puede configurar este botón en

59
00:04:56,260 --> 00:05:00,130
la parte inferior esquina derecha. Si echa un vistazo a su entrada

60
00:05:06,070 --> 00:05:12,090
aquí y hace clic en cualquiera de las entradas, es este botón aquí en la esquina inferior derecha que

61
00:05:12,090 --> 00:05:15,950
dice regresar aquí para imageUrl. Ahora en el título, lo configuré como siguiente,

62
00:05:15,960 --> 00:05:21,870
así que si haces clic en el campo del título, ahora ves aquí dice más ancho, que es alemán para el siguiente

63
00:05:21,870 --> 00:05:27,770
y esto es solo porque tengo un emulador alemán aquí y permíteme también reiniciar esto en Android porque se bloqueó allí para

64
00:05:27,770 --> 00:05:29,660
que yo también pueda mostrarlo allí.

65
00:05:30,730 --> 00:05:36,280
Si vamos a nuestra entrada allí, haga clic en el título, verá el siguiente botón aquí, en imageUrl, tiene

66
00:05:36,280 --> 00:05:41,080
este botón hecho aquí y que se puede configurar con el tipo de clave de retorno,

67
00:05:41,080 --> 00:05:47,020
aunque tenga en cuenta que esto solo controla cómo esto se muestra, lo que dice allí, cuál es la etiqueta

68
00:05:47,020 --> 00:05:49,150
allí o qué tipo de botón se

69
00:05:49,300 --> 00:05:55,150
presenta, no cambia automáticamente lo que hace este botón, por ejemplo, si hago clic en el botón más ancho, este

70
00:05:55,150 --> 00:05:56,200
teclado se cierra,

71
00:05:56,200 --> 00:05:59,990
lo mismo es cierto si Hago clic en la tecla de retorno aquí.

72
00:06:00,150 --> 00:06:05,040
Ahora, cuando hablamos del comportamiento de las entradas de texto, todos los eventos que podemos escuchar son interesantes.

73
00:06:05,340 --> 00:06:09,190
Con on, obtienes una idea de todos los eventos que puedes escuchar y, por

74
00:06:09,210 --> 00:06:15,350
ejemplo, allí tienes onBlur que se dispara cada vez que una entrada pierde el foco, onChange se dispararía, así que en cada pulsación

75
00:06:15,420 --> 00:06:21,090
de tecla y te da el evento de entrada completo, onChangeText que también dispara en cada pulsación de tecla, pero solo

76
00:06:21,150 --> 00:06:25,230
le da el texto que se ingresó, que normalmente es lo que más le interesa.

77
00:06:25,980 --> 00:06:35,000
onEndEditing donde también podemos tener una idea de cuándo se dispara, así que si ingreso onEndEditing aquí, veamos cuándo se imprime en

78
00:06:35,010 --> 00:06:37,440
la consola, si ahora voy

79
00:06:37,440 --> 00:06:46,710
aquí a mi entrada y tenga en cuenta que estoy en la entrada del título, así que si Escribo allí prueba, vemos que no

80
00:06:46,710 --> 00:06:49,350
se disparó aquí, si hago clic fuera

81
00:06:49,350 --> 00:06:54,930
de esto, ahora se disparó en EndEditing. Lo mismo es cierto si hago clic en el

82
00:06:54,930 --> 00:07:01,920
botón más ancho aquí, por ejemplo, así que básicamente siempre que dejamos este teclado con el foco o, en general, cuando hacemos clic

83
00:07:01,920 --> 00:07:03,890
en ese botón hecho allí también.

84
00:07:03,960 --> 00:07:10,620
Además, también tenemos otros oyentes, como onFocus, que obviamente se dispara cuando esta entrada se enfoca o también

85
00:07:10,620 --> 00:07:19,640
enSelectionChange cuando seleccionamos texto allí o enSubmitEditing, que se dispara cuando se hace clic en este botón de retorno, así que si agrego onSubmitEditing

86
00:07:19,640 --> 00:07:21,860
aquí, cuando yo agregue este oyente

87
00:07:21,860 --> 00:07:30,820
también y también agregue una declaración de registro de la consola, verá que esto se disparará, cada vez que escriba aquí, no se dispara,

88
00:07:30,820 --> 00:07:37,820
cada vez que haga clic fuera de aquí, tampoco se dispara, solo obtenemos el onEndEditing inicie sesión aquí, pero

89
00:07:37,960 --> 00:07:39,130
se activará

90
00:07:39,130 --> 00:07:45,600
si presiono la tecla más ancha aquí, allí verá en Submitir edición, por lo que este es

91
00:07:45,610 --> 00:07:47,290
un oyente que usaría

92
00:07:47,290 --> 00:07:52,870
para escuchar cuando se hace clic en la tecla de retorno y luego puede

93
00:07:52,870 --> 00:07:59,230
hacer lo que quiera, como enviar su datos o mueva automáticamente el foco a la siguiente entrada

94
00:07:59,230 --> 00:08:03,090
con la ayuda de referencias, por ejemplo, si lo desea.

95
00:08:03,200 --> 00:08:08,240
Así es como puede configurar esto y, como dije, le recomendaría que se sumerja en

96
00:08:08,240 --> 00:08:10,370
esto para tener una idea

97
00:08:10,400 --> 00:08:16,160
de cómo funciona, ahora seguiré adelante y quiero asegurarme de que no solo escuchemos las entradas y almacenamos

98
00:08:16,160 --> 00:08:19,460
los valores pero también validamos lo que ingresa el usuario.