1 00:00:02,410 --> 00:00:07,890 Entonces, de vuelta en el código, comenzamos agregando algunas vistas aquí y, por supuesto, en este momento, esto no funcionará, esto simplemente 2 00:00:07,900 --> 00:00:13,930 se romperá o no hará que nada sea significativo en la pantalla. En esa primera vista anidada aquí, en este 3 00:00:13,930 --> 00:00:14,920 bloque, fui 4 00:00:14,920 --> 00:00:21,330 a tener una entrada de texto y un botón. Convenientemente, ambos son proporcionados por React Native, tenemos una entrada de 5 00:00:21,330 --> 00:00:27,390 texto aquí y también tenemos un componente de botón. Por lo tanto, podemos importar tanto el ingreso de 6 00:00:27,390 --> 00:00:33,510 texto que permite al usuario ingresar texto y botón y luego aquí, en esa vista, en esa primera vista anidada, 7 00:00:33,510 --> 00:00:40,890 agregaré un ingreso de texto como una etiqueta de cierre automático porque no hay nada que podamos pasar entre la apertura y etiquetas de 8 00:00:40,890 --> 00:00:42,440 cierre y para el botón, 9 00:00:42,450 --> 00:00:47,430 podría pensar que usa un botón como este, pero en realidad, no es así como funciona 10 00:00:47,430 --> 00:00:47,960 este 11 00:00:47,970 --> 00:00:53,620 botón Reaccionar nativo, sino que es un botón de cierre automático y establece una propiedad de título para 12 00:00:53,840 --> 00:01:00,150 definir qué texto representar allí y aquí, podríamos decir agregar. Ahora tenemos una entrada de texto y un 13 00:01:00,360 --> 00:01:08,230 botón allí y si guardamos esto y esta recarga, vemos el botón aquí pero no vemos la entrada de texto, ¿verdad? 14 00:01:08,490 --> 00:01:11,070 Entonces eso no está funcionando según lo previsto. 15 00:01:11,070 --> 00:01:16,850 La razón de esto es que la entrada de texto estará oculta aquí debajo de la barra de estado. 16 00:01:16,920 --> 00:01:22,740 Así que ahora es el momento en el que debemos comenzar a agregar un diseño, una 17 00:01:22,770 --> 00:01:25,410 estructura a esta página porque solo 18 00:01:25,410 --> 00:01:30,990 agregar componentes por sí solos no funcionará, una aplicación React Native se trata de usar 19 00:01:31,080 --> 00:01:40,190 componentes y luego agregar el diseño correcto, el correcto estructura a sus componentes. Entonces, por ejemplo, tendría sentido agregar algo de relleno general alrededor de esa vista, así que 20 00:01:40,190 --> 00:01:46,310 en esta vista superior, el relleno básicamente está a cierta distancia del borde de esa vista, que es básicamente el marco del 21 00:01:46,760 --> 00:01:48,870 dispositivo en nuestro caso aquí ya que estoy 22 00:01:48,920 --> 00:01:54,890 hablando de la vista superior al contenido de la vista, por lo que hay un cierto espacio entre los bordes de 23 00:01:54,980 --> 00:02:00,650 la vista superior, de esa vista circundante y el contenido de la vista y para eso, podemos agregar la propiedad 24 00:02:00,650 --> 00:02:02,660 de estilo aquí en la vista. 25 00:02:02,660 --> 00:02:09,530 La mayoría de los componentes de React Native son compatibles con la propiedad de estilo, la vista lo hace, y allí, 26 00:02:10,070 --> 00:02:15,800 usa este enlace de contenido dinámico aquí, que también conoce de React normal con las llaves simples 27 00:02:15,800 --> 00:02:21,590 y el estilo espera un objeto Javascript ahora. Entonces agregamos otro par de llaves aquí y ahora 28 00:02:21,590 --> 00:02:25,530 un error común es que cree que esta es una sintaxis especial 29 00:02:25,670 --> 00:02:31,390 que requiere llaves dobles, de hecho, es la sintaxis React normal con llaves similares donde el valor dinámico 30 00:02:31,400 --> 00:02:34,640 que está pasando al estilo Simplemente es un objeto Javascript, 31 00:02:34,640 --> 00:02:40,310 por lo tanto, tenemos otro par de llaves. Y en este objeto, ahora puede tener pares 32 00:02:40,310 --> 00:02:46,610 clave-valor donde las claves son sus nombres de propiedad de estilo y los valores son los valores para estas propiedades 33 00:02:47,420 --> 00:02:51,740 de estilo y estos nombres de propiedad de estilo están influenciados por CSS. 34 00:02:51,770 --> 00:02:58,250 Entonces, aquí, lo que puede hacer es agregar relleno, que también existe en React Native y siempre puede 35 00:02:58,250 --> 00:03:04,130 encontrar una lista completa de propiedades de estilo admitidas yendo al componente que está utilizando, 36 00:03:04,130 --> 00:03:10,850 como la vista aquí y luego haciendo clic en la propiedad de estilo y aquí si hace clic en 37 00:03:10,850 --> 00:03:17,750 ver estilos, verá una lista de todas las propiedades proporcionadas que puede usar y verá algunas propiedades especiales para la 38 00:03:17,750 --> 00:03:24,410 vista aquí y luego algunos accesorios generales como accesorios de diseño y allá, Encontraría el relleno por ejemplo. 39 00:03:24,480 --> 00:03:30,640 Así es como puede averiguar qué es compatible, pero también verá muchos ejemplos a lo largo de este curso. 40 00:03:30,650 --> 00:03:36,080 Entonces, aquí agrego relleno y el valor ahora puede ser solo un número que será píxeles independientes del dispositivo, por lo 41 00:03:36,290 --> 00:03:41,300 que un valor de píxel que siempre se ve bien sin importar el tamaño del dispositivo que tenga. 42 00:03:41,330 --> 00:03:46,990 Entonces, aquí podríamos agregar 10 y si hacemos eso, ahora vemos que el botón está un poco más 43 00:03:47,050 --> 00:03:51,860 abajo, tal vez agreguemos 30 aquí para que podamos ver una diferencia más grande y 44 00:03:52,090 --> 00:03:56,050 ahora eso está funcionando y ahora si toca sobre el botón, realmente 45 00:03:56,050 --> 00:04:01,230 no ves una entrada aquí, pero ves que mi teclado virtual se abrió en Android, en iOS 46 00:04:01,240 --> 00:04:03,790 no se abre de manera predeterminada, pero también 47 00:04:03,970 --> 00:04:11,410 puedes tocar aquí y si fueras a tocar con la frecuencia suficiente o si vas a hardware, ese teclado alterna el teclado del software, 48 00:04:11,410 --> 00:04:13,780 también debería abrirse allí, así que aquí 49 00:04:13,780 --> 00:04:15,180 también tenemos una entrada. 50 00:04:15,190 --> 00:04:19,840 Entonces ahora podemos ver esa entrada porque ya no está detrás de esa barra de estado. 51 00:04:19,840 --> 00:04:27,040 Por lo tanto, agregar ese relleno probablemente tenía sentido porque ahora nos aseguramos de que nuestro diseño esté dentro 52 00:04:27,040 --> 00:04:28,660 de nuestra pantalla aquí. 53 00:04:28,660 --> 00:04:31,980 Ahora hay otras herramientas para asegurarnos de que también tenemos suficiente relleno 54 00:04:32,170 --> 00:04:36,460 aquí, pero por ahora, configuremos manualmente el relleno y quizás lo establezcamos en un valor de 30. 55 00:04:36,880 --> 00:04:39,760 Así que estábamos comenzando con el diseño, ahora 56 00:04:39,760 --> 00:04:43,650 volvamos a este componente y asegurémonos de que podemos ver algo, 57 00:04:43,660 --> 00:04:48,120 podemos ver que hay una entrada de texto y no solo tenemos que adivinarlo. 58 00:04:48,550 --> 00:04:54,070 Para esto, podemos ir a la entrada de texto y allí, por ejemplo, agregar el accesorio de marcador de posición 59 00:04:54,070 --> 00:04:55,800 y al igual que antes para 60 00:04:55,810 --> 00:05:02,990 averiguar qué puede configurar, siempre puede ir a los documentos oficiales, en este caso a los documentos de entrada de texto y allí, encontrará una descripción 61 00:05:03,000 --> 00:05:04,930 de cómo usarlo y algunos ejemplos, pero 62 00:05:05,070 --> 00:05:10,770 si se desplaza hacia abajo, también encontrará todos los accesorios que puede configurar y allí, por ejemplo, descubre que puede configurar 63 00:05:11,130 --> 00:05:16,410 un accesorio de marcador de posición, que es ese texto ficticio que se muestra antes de que el usuario 64 00:05:16,410 --> 00:05:17,640 ingrese algún texto. 65 00:05:17,640 --> 00:05:23,580 Entonces, aquí se necesita una secuencia y aquí podríamos ingresar el objetivo del curso porque debería poder establecer 66 00:05:23,580 --> 00:05:24,940 el objetivo del 67 00:05:25,040 --> 00:05:28,970 curso aquí y si lo hace, verá tanto en Android como en 68 00:05:28,980 --> 00:05:31,510 iOS el texto del objetivo del curso. 69 00:05:31,510 --> 00:05:33,590 Aún así, podría ser un poco 70 00:05:33,600 --> 00:05:39,180 mejor, podría ser un poco más claro que hay una entrada de texto y, por lo tanto, 71 00:05:39,210 --> 00:05:40,170 aquí, agregaré 72 00:05:40,170 --> 00:05:48,170 un estilo, otro estilo en línea y aquí configuraré el color del borde inferior del negro, negro ahora es una cadena, tales accesos directos 73 00:05:48,180 --> 00:05:53,940 de color son compatibles con React Native y una lista completa de todos los colores disponibles se 74 00:05:54,870 --> 00:06:01,860 adjunta a esta conferencia aquí y también puedo ver que un ancho del borde inferior de digamos 1 y lo que 75 00:06:01,860 --> 00:06:07,770 esto hace es establecer un fondo limite esta entrada, de modo que ahora, si volvemos, tenemos ese subrayado 76 00:06:07,770 --> 00:06:13,710 aquí, podemos verlo claramente en iOS y dado que todavía no hay mucho espacio en iOS, permítanme aumentar 77 00:06:13,710 --> 00:06:17,520 este relleno hasta 50 tal vez, si eso se ve mejor. 78 00:06:17,540 --> 00:06:22,630 Así que ahora tenemos ese borde debajo de nuestra entrada y eso deja en claro que hay una entrada aquí. 79 00:06:22,810 --> 00:06:26,380 Por supuesto, no está restringido a solo establecer un borde en la parte 80 00:06:26,380 --> 00:06:28,640 inferior, también puede establecer un borde general 81 00:06:28,660 --> 00:06:32,140 dejando fuera el fondo aquí, un color de borde y un ancho 82 00:06:32,530 --> 00:06:36,180 de borde y si lo hiciera, entonces esto estaría rodeado por un frontera. 83 00:06:36,190 --> 00:06:42,250 Ahora, una nota importante con respecto a estos nombres de estilo aquí, nombres de propiedades de estilo, por supuesto, ve 84 00:06:42,250 --> 00:06:49,390 que es el ancho del borde, el color del borde escrito de esta manera, en CSS normal, habría tenido un color de borde y 85 00:06:49,750 --> 00:06:55,870 eso aplicaría el color del borde, pero eso sería ser un nombre de propiedad no válido en Javascript, razón por la 86 00:06:55,870 --> 00:06:57,670 cual esto no es compatible. 87 00:06:57,670 --> 00:07:03,280 Ahora, en realidad, un nombre de propiedad válido en Javascript sería si lo envuelve entre comillas, pero 88 00:07:03,520 --> 00:07:10,240 incluso eso no es compatible con React Native, por lo que estas sintaxis alternativas, por ejemplo, esta sintaxis funcionaría en Javascript 89 00:07:10,240 --> 00:07:18,010 si aplica algún estilo al elemento HTML web , estas sintaxis no son compatibles con React Native, sin embargo, allí realmente tiene que usar 90 00:07:18,010 --> 00:07:23,320 esta sintaxis de caso de camello donde, por ejemplo, escribe un color de borde como 91 00:07:23,320 --> 00:07:29,740 este o, en resumen, debe usar los nombres de propiedad que también encuentra en los documentos oficiales, allí no 92 00:07:29,740 --> 00:07:37,030 hay nombres alternativos para estas propiedades de estilo y ahora también podríamos agregar un relleno aquí de digamos 10 para que tengamos 93 00:07:37,600 --> 00:07:43,570 un poco de espacio entre el borde y la parte real donde ingresamos algo y diría que esto 94 00:07:43,720 --> 00:07:49,540 ya se ve mucho mejor y Podemos ver claramente que aquí tenemos una entrada donde los usuarios pueden 95 00:07:49,540 --> 00:07:50,530 ingresar algo.