Entonces, de vuelta en el código, comenzamos agregando algunas vistas aquí y, por supuesto, en este momento, esto no funcionará, esto simplemente
se romperá o no hará que nada sea significativo en la pantalla. En esa primera vista anidada aquí, en este
bloque, fui
a tener una entrada de texto y un botón. Convenientemente, ambos son proporcionados por React Native, tenemos una entrada de
texto aquí y también tenemos un componente de botón. Por lo tanto, podemos importar tanto el ingreso de
texto que permite al usuario ingresar texto y botón y luego aquí, en esa vista, en esa primera vista anidada,
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
cierre y para el botón,
podría pensar que usa un botón como este, pero en realidad, no es así como funciona
este
botón Reaccionar nativo, sino que es un botón de cierre automático y establece una propiedad de título para
definir qué texto representar allí y aquí, podríamos decir agregar. Ahora tenemos una entrada de texto y un
botón allí y si guardamos esto y esta recarga, vemos el botón aquí pero no vemos la entrada de texto, ¿verdad?
Entonces eso no está funcionando según lo previsto.
La razón de esto es que la entrada de texto estará oculta aquí debajo de la barra de estado.
Así que ahora es el momento en el que debemos comenzar a agregar un diseño, una
estructura a esta página porque solo
agregar componentes por sí solos no funcionará, una aplicación React Native se trata de usar
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
en esta vista superior, el relleno básicamente está a cierta distancia del borde de esa vista, que es básicamente el marco del
dispositivo en nuestro caso aquí ya que estoy
hablando de la vista superior al contenido de la vista, por lo que hay un cierto espacio entre los bordes de
la vista superior, de esa vista circundante y el contenido de la vista y para eso, podemos agregar la propiedad
de estilo aquí en la vista.
La mayoría de los componentes de React Native son compatibles con la propiedad de estilo, la vista lo hace, y allí,
usa este enlace de contenido dinámico aquí, que también conoce de React normal con las llaves simples
y el estilo espera un objeto Javascript ahora. Entonces agregamos otro par de llaves aquí y ahora
un error común es que cree que esta es una sintaxis especial
que requiere llaves dobles, de hecho, es la sintaxis React normal con llaves similares donde el valor dinámico
que está pasando al estilo Simplemente es un objeto Javascript,
por lo tanto, tenemos otro par de llaves. Y en este objeto, ahora puede tener pares
clave-valor donde las claves son sus nombres de propiedad de estilo y los valores son los valores para estas propiedades
de estilo y estos nombres de propiedad de estilo están influenciados por CSS.
Entonces, aquí, lo que puede hacer es agregar relleno, que también existe en React Native y siempre puede
encontrar una lista completa de propiedades de estilo admitidas yendo al componente que está utilizando,
como la vista aquí y luego haciendo clic en la propiedad de estilo y aquí si hace clic en
ver estilos, verá una lista de todas las propiedades proporcionadas que puede usar y verá algunas propiedades especiales para la
vista aquí y luego algunos accesorios generales como accesorios de diseño y allá, Encontraría el relleno por ejemplo.
Así es como puede averiguar qué es compatible, pero también verá muchos ejemplos a lo largo de este curso.
Entonces, aquí agrego relleno y el valor ahora puede ser solo un número que será píxeles independientes del dispositivo, por lo
que un valor de píxel que siempre se ve bien sin importar el tamaño del dispositivo que tenga.
Entonces, aquí podríamos agregar 10 y si hacemos eso, ahora vemos que el botón está un poco más
abajo, tal vez agreguemos 30 aquí para que podamos ver una diferencia más grande y
ahora eso está funcionando y ahora si toca sobre el botón, realmente
no ves una entrada aquí, pero ves que mi teclado virtual se abrió en Android, en iOS
no se abre de manera predeterminada, pero también
puedes tocar aquí y si fueras a tocar con la frecuencia suficiente o si vas a hardware, ese teclado alterna el teclado del software,
también debería abrirse allí, así que aquí
también tenemos una entrada.
Entonces ahora podemos ver esa entrada porque ya no está detrás de esa barra de estado.
Por lo tanto, agregar ese relleno probablemente tenía sentido porque ahora nos aseguramos de que nuestro diseño esté dentro
de nuestra pantalla aquí.
Ahora hay otras herramientas para asegurarnos de que también tenemos suficiente relleno
aquí, pero por ahora, configuremos manualmente el relleno y quizás lo establezcamos en un valor de 30.
Así que estábamos comenzando con el diseño, ahora
volvamos a este componente y asegurémonos de que podemos ver algo,
podemos ver que hay una entrada de texto y no solo tenemos que adivinarlo.
Para esto, podemos ir a la entrada de texto y allí, por ejemplo, agregar el accesorio de marcador de posición
y al igual que antes para
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
de cómo usarlo y algunos ejemplos, pero
si se desplaza hacia abajo, también encontrará todos los accesorios que puede configurar y allí, por ejemplo, descubre que puede configurar
un accesorio de marcador de posición, que es ese texto ficticio que se muestra antes de que el usuario
ingrese algún texto.
Entonces, aquí se necesita una secuencia y aquí podríamos ingresar el objetivo del curso porque debería poder establecer
el objetivo del
curso aquí y si lo hace, verá tanto en Android como en
iOS el texto del objetivo del curso.
Aún así, podría ser un poco
mejor, podría ser un poco más claro que hay una entrada de texto y, por lo tanto,
aquí, agregaré
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
de color son compatibles con React Native y una lista completa de todos los colores disponibles se
adjunta a esta conferencia aquí y también puedo ver que un ancho del borde inferior de digamos 1 y lo que
esto hace es establecer un fondo limite esta entrada, de modo que ahora, si volvemos, tenemos ese subrayado
aquí, podemos verlo claramente en iOS y dado que todavía no hay mucho espacio en iOS, permítanme aumentar
este relleno hasta 50 tal vez, si eso se ve mejor.
Así que ahora tenemos ese borde debajo de nuestra entrada y eso deja en claro que hay una entrada aquí.
Por supuesto, no está restringido a solo establecer un borde en la parte
inferior, también puede establecer un borde general
dejando fuera el fondo aquí, un color de borde y un ancho
de borde y si lo hiciera, entonces esto estaría rodeado por un frontera.
Ahora, una nota importante con respecto a estos nombres de estilo aquí, nombres de propiedades de estilo, por supuesto, ve
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
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
cual esto no es compatible.
Ahora, en realidad, un nombre de propiedad válido en Javascript sería si lo envuelve entre comillas, pero
incluso eso no es compatible con React Native, por lo que estas sintaxis alternativas, por ejemplo, esta sintaxis funcionaría en Javascript
si aplica algún estilo al elemento HTML web , estas sintaxis no son compatibles con React Native, sin embargo, allí realmente tiene que usar
esta sintaxis de caso de camello donde, por ejemplo, escribe un color de borde como
este o, en resumen, debe usar los nombres de propiedad que también encuentra en los documentos oficiales, allí no
hay nombres alternativos para estas propiedades de estilo y ahora también podríamos agregar un relleno aquí de digamos 10 para que tengamos
un poco de espacio entre el borde y la parte real donde ingresamos algo y diría que esto
ya se ve mucho mejor y Podemos ver claramente que aquí tenemos una entrada donde los usuarios pueden
ingresar algo.