El papel de AppRegistry

Aunque CodeHS lo oculta en ocasiones para simplificar la interfaz, AppRegistry es el punto de entrada que registra el componente raíz de tu aplicación.

Sin este registro, el sistema operativo móvil no sabría qué parte de tu código de JavaScript debe cargar al iniciar.

AppRegistry.registerComponent('App', () => App);

!

Dato clave

Siempre incluiremos la importación de AppRegistry en nuestros ejercicios desarrollados.

Múltiples componentes Image

Podemos organizar varios componentes visuales dentro de un mismo View para crear interfaces ricas.

Combinando Image y Text

Es común añadir descripciones o subtítulos a nuestras imágenes. Los componentes se renderizan en el orden en que aparecen en el código.

<Image ... />
<Text style={styles.caption}>
  Gato bailarín
</Text>

Gato bailarín

Snapchat Login Page

En este ejercicio práctico, los estudiantes aprenderán a posicionar elementos complejos y utilizar recursos externos.

Objetivo:

Añadir la imagen icónica del fantasma de Snapchat al centro del bloque amarillo de tu interfaz.

URI: https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83

Snapchat: Implementación del Render

render() {
  return (
    <View style={styles.container}>
      <View style={styles.amarillo}>
        <Image
          source={{uri: 'https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83'}}
          style={{ width: 100, height: 100 }}
        />
      </View>
      <!-- Los otros bloques de color van aquí -->
    </View>
  );
}

Snapchat: Estilos de la aplicación

amarillo: {
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'yellow',
  width: '100%',
  height: '70%',
},

rojo: {
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'red',
  width: '100%',
  height: '15%',
},

azul: {
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#279FF5',
  width: '100%',
  height: '15%',
},

Reproductor de música móvil

En este reto avanzado, los estudiantes construirán una interfaz completa para un reproductor multimedia.

Requerimientos visuales:

• • Portada del álbum (275x275)
• • Información de la pista
• • Barra de tiempo
• • Controles de navegación

Your Top Songs 2018

This is the Song Name

Artist

Reproductor: Código de controles

Reproductor: Estilos avanzados

arrows: {
  margin: 25,
  height: 20,
  width: 30,
},

pause: {
  height: 70,
  width: 70,
},

playerControlsContainer: {
  flexDirection: 'row',
  marginTop: 20,
},

Google Search con imágenes

En este ejercicio, los estudiantes actualizan su interfaz de Google para utilizar activos gráficos reales en lugar de solo colores.

Pista de diseño:

Puedes redondear las esquinas de un campo de texto utilizando borderTopLeftRadius y borderBottomLeftRadius.

Buscar en la web...

Google: Manejo de entrada y alertas

state = { searchText: '', }

<TextInput
  style={styles.searchBar}
  onChangeText={(searchText) => this.setState({searchText})}
  value={this.state.searchText}
/>

<TouchableHighlight
  style={styles.button}
  onPress={() => { alert('Buscando: ' + this.state.searchText) }}
>
  <Image source={{ uri: '...lupa...' }} style={{ height: 30, width: 30 }} />
</TouchableHighlight>

ImageBackground

¿Qué sucede si queremos colocar texto sobre una imagen? El componente Image normal no permite tener "hijos".

Para esto utilizamos ImageBackground. Funciona como un contenedor que dibuja una imagen debajo de todo lo que pongas dentro.

Sintaxis:

¡HOLA KAREL!

Quiz 4.2.2: Control de altura

Si la pantalla tiene 400 píxeles de alto, ¿cuál de estos NO cubrirá toda la altura?

A) height: 600

B) height: 400

C) height: 200

Respuesta: C. Solo cubrirá la mitad de la pantalla disponible.

Ejemplo: Hello, Universe!

<ImageBackground
  style={styles.background}
  source={{ uri: '...universo...' }}
>
  <View style={styles.textContainer}>
    <Text style={styles.paragraph}>
      ¡Hola, Universo!
    </Text>
  </View>
</ImageBackground>

¡Hola, Universo!

Ejercicio: Phone Background

Diseña la pantalla de inicio de tu propio dispositivo móvil utilizando componentes anidados.

Instrucciones:

• • Usa una imagen de fondo al 100%.
• • Añade la hora actual.
• • Añade la fecha con un estilo elegante.

5:41

Lunes, 12 de Febrero

Estilos del Phone Background

time: {
  textAlign: 'center',
  fontSize: 70,
  fontFamily: 'Helvetica',
  color: 'white',
},

date: {
  textAlign: 'center',
  fontSize: 20,
  fontFamily: 'Helvetica',
  color: 'white',
  marginTop: 20,
},

back: {
  height: '100%',
  width: '100%',
},

Interactividad móvil

Para que nuestras imágenes funcionen como botones reales, utilizamos el componente TouchableHighlight.

Este componente "envuelve" a cualquier elemento y detecta cuando el estudiante lo presiona en la pantalla.

Quiz 4.3.2: Estructura interactiva

¿Cuál de estos códigos permite que la imagen de Karel sea clickeable?

A) <Image source={...} onPress={...} />

B) <TouchableHighlight onPress={...}>
     <Image source={...} />
   </TouchableHighlight>

Las imágenes en React Native no tienen la propiedad onPress por sí mismas.

Ejercicio: Citas interactivas

Crea una aplicación que muestre una imagen de una figura inspiradora.

Al presionar la imagen, debe aparecer un cuadro de alerta con una cita famosa de esa persona.

Ejemplo: Ada Lovelace

"Un barco en el puerto está seguro, pero no es para eso que están hechos los barcos."

ADA LOVELACE

Citas: Implementación del Alerta

<TouchableHighlight
  onPress={() => { alert('"Un barco en el puerto..."'); }}
>
  <Image
    source={{ uri: 'URL_ADA' }}
    style={{ height: 450, width: 375 }}
  />
</TouchableHighlight>

Flex Layouts

El sistema Flex permite que los componentes se expandan para llenar el espacio disponible de manera inteligente.

La propiedad flex: 1 indica que un componente debe ocupar todo el espacio que su contenedor padre le ofrezca.

¿Cómo funciona?

Si tienes dos elementos con flex: 1, se repartirán el espacio 50% y 50%.

flex: 1

flex: 3

Quiz 4.4.2: Proporciones Flex

Si un contenedor tiene flex: 1, ¿qué significa para su componente hijo?

A) El componente siempre llenará el 100% del contenedor padre.

✓ El componente llenará cualquier espacio en blanco de su contenedor padre.

Flex permite que la interfaz sea elástica y se adapte al tamaño de la pantalla.

Dirección del Layout

Column (Por defecto)

Row

Ejercicio: Rainbow Background

Crea un fondo de arcoíris utilizando 7 franjas de colores proporcionales.

Usa flex: 1 en cada una de las 7 Views hijas para que se repartan el alto de la pantalla de forma equitativa.

Layout de Banderas

Utiliza relaciones de flex para replicar la bandera de Sierra Leona.

Configuración:

• • Padre: flexDirection: 'row'
• • Azul: flex: 1
• • Blanco: flex: 1
• • Verde: flex: 1

Diseño avanzado: Bandera de Suecia

Para diseños complejos, necesitamos anidar contenedores con diferentes direcciones.

container: { flexDirection: 'row' },
side: { flex: 2 },
center: { flex: 1, backgroundColor: '#F8CC46' }

Este diseño requiere 3 columnas principales donde la central es la franja vertical de la cruz.

Snapchat: Flex y Espaciado

Refactoriza el diseño previo para que el bloque amarillo ocupe 5 de las 7 partes totales de la pantalla.

Utiliza flex: 5 para el bloque amarillo y flex: 1 para cada botón.

LOG IN

SIGN UP

Dimensions API

¿Cómo adaptamos nuestra app a diferentes tamaños de pantalla reales? Usamos la API Dimensions.

Esto nos permite obtener el ancho y alto exacto del dispositivo del estudiante en tiempo de ejecución.

let deviceHeight = Dimensions.get('window').height;
let deviceWidth = Dimensions.get('window').width;

Móvil

Tablet

Quiz 4.5.2: Lógica de dimensiones

¿Cuál es la forma correcta de asignar el ancho completo del dispositivo?

container: { deviceWidth, }

✓ container: { width: deviceWidth, }

Siempre debemos emparejar la propiedad de estilo con el valor de la variable obtenida.

Quiz 4.5.2: Matemáticas de layout

Si quieres que 3 componentes hijos llenen la altura total usando Dimensions...

height: deviceHeight / 3

Este método nos da un control preciso sobre el tamaño en píxeles, a diferencia de flex que usa proporciones relativas.

Quiz 4.5.2: Fuentes proporcionales

¿Qué valor permitiría que el tamaño de fuente sea siempre 1/10 de la altura de la pantalla?

A) fontSize: deviceHeight * 10

✓ B) fontSize: deviceHeight / 10

C) fontSize: deviceHeight

Ejemplo: Cuadrícula con Dimensions

container: {
  height: deviceHeight,
  width: deviceWidth,
},
top: {
  height: deviceHeight / 2,
  flexDirection: 'row',
},
topLeft: {
  width: deviceWidth / 2,
  backgroundColor: 'blue',
}

Ejercicio: Rainbow v2 (Dimensions)

Refactoriza el arcoíris anterior para usar la altura explícita calculada con Dimensions en lugar de flex.

red: {
  height: deviceHeight / 7,
  backgroundColor: 'red',
}

Snapchat: Layout Responsivo Final

Notas de diseño:

• • Pantalla dividida en 7 partes (Bloque amarillo: 5/7).
• • Fuente: 1/30 de la altura de la pantalla.
• • Imagen: Cuadrado de 1/10 de la altura del dispositivo.

label: {
  fontSize: deviceHeight / 30,
  color: 'white',
  fontWeight: 'bold',
},
image: {
  height: deviceHeight / 10,
  width: deviceHeight / 10,
}

Snapchat: Código final responsivo

Scorekeeper v3 Pro

Lleva tu marcador deportivo al siguiente nivel integrando fondos reales y botones visuales.

Nuevos elementos:

• • Fondo de estadio con ImageBackground.
• • Íconos de equipo en la cabecera.
• • Botones de acción con estilo deportivo.

FOOTBALL

TOUCHDOWN!

FIELD GOAL!

Scorekeeper: Fondo y Registro

render() {
  return (
    <View style={styles.container}>
      <ImageBackground
        style={{ height: deviceHeight, width: deviceWidth }}
        source={{ uri: 'https://...estadio...' }}
      >
        <View style={styles.container}>
          <!-- Los componentes del marcador aquí -->
        </View>
      </ImageBackground>
    </View>
  );
}

Scorekeeper: Estilos de los botones

button: {
  height: deviceHeight / 8,
  width: deviceWidth / 2.5,
  backgroundColor: 'green',
  borderColor: 'white',
  borderWidth: 2,
  alignItems: 'center',
  justifyContent: 'center',
  margin: 10,
},

buttonText: {
  color: 'white',
  fontSize: deviceHeight / 40,
  textAlign: 'center',
},

Quiz Avanzado 4.7.1: Importancia de Flex

En todas nuestras aplicaciones, siempre tenemos un componente View que actúa como contenedor. ¿Por qué es importante establecer su flex en 1?

Respuesta: Porque dar a la View principal un valor de flex: 1 obliga a la View a ocupar todo el espacio disponible en la pantalla.

Quiz Avanzado 4.7.1: Contenedores

¿Cuál de los siguientes componentes NO puede contener componentes hijos?

A) View component

B) ImageBackground component

✓ C) Image component

D) TouchableHighlight component

Quiz 4.7.1: Dimensiones forzadas

Supongamos que una imagen mide 250x250 píxeles. Si le das las dimensiones de 100x250 píxeles, ¿qué sucederá con la imagen renderizada?

La imagen se encogerá al tamaño especificado (manteniendo toda la imagen, pero más pequeña en el eje horizontal).

Nota: No puedes especificar dimensiones que sean diferentes del tamaño real de la imagen sin que esta se escale.

Quiz 4.7.1: Aspect Ratio

¿Qué define el Aspect Ratio de una imagen?

La relación entre el ancho y el alto de una imagen.

Quiz 4.7.1: Análisis de salida de código

container: { flex: 1 },
yellowStripe: { flex: 1, backgroundColor: 'yellow' },
orangeStripe: { flex: 2, backgroundColor: 'orange' }

Quiz 4.7.1: Composición visual

redStripe: { flex: 4, backgroundColor: 'red', alignItems: 'center' },
orangeBox: { height: 200, width: 200, backgroundColor: 'orange' }

Quiz 4.7.1: Ajuste de escala

¿Cómo aumentaríamos el tamaño de la imagen de la estrella dentro del bloque naranja?

Aumentar el ancho (width) y el alto (height) en la etiqueta de la imagen.

Cambiar el tamaño del contenedor naranja no afectará el tamaño de la imagen interior si esta tiene dimensiones fijas.

Quiz 4.7.1: Mantenimiento del Aspect Ratio

Si una imagen tiene una altura de 100 píxeles y un ancho de 200 píxeles, y aumentamos la altura a 300 píxeles, ¿qué ancho debemos establecer para mantener la proporción?

600 píxeles

Cálculo: (300 / 100) * 200 = 600. La imagen creció 3 veces en altura, por lo que debe crecer 3 veces en ancho.

Quiz 4.7.1: Alineación horizontal

orangeStripe: { flex: 4, backgroundColor: 'orange', flexDirection: 'row' }

Al usar flexDirection: 'row', las estrellas se alinean de izquierda a derecha.

Quiz 4.7.1: Flex en interfaces reales

PURPLE: 1

BLUE: 1

TEAL: 2

GREEN: 2

YELLOW: 4

¿Qué valores de flex podrían controlar este layout?

Cualquier conjunto de valores que mantenga la relación de tamaño (1:1:2:2:4) funcionará correctamente.

Quiz 4.7.1: Análisis de Bandera con Dimensions

top: { height: deviceHeight/5, flexDirection: 'row' },
bottom: { height: 4*(deviceHeight/5), flexDirection: 'row' },
topLeft: { width: 2*(deviceWidth/3), backgroundColor: 'red' },
topRight: { width: deviceWidth/3, backgroundColor: 'blue' }

Quiz 4.7.1: Atributos de layout

Para crear una bandera con franjas verticales, ¿qué atributo es estrictamente necesario?

flexDirection: 'row'

Sin este atributo, las franjas se apilarían una encima de otra en lugar de ir de lado a lado.

Quiz 4.7.1: Diferencias fundamentales

¿En qué se diferencian ImageBackground e Image?

I. ImageBackground puede contener otros componentes, Image no.

II. Ambos requieren atributos de altura y anchura para renderizarse correctamente.

Respuesta: I y II son correctas.

Quiz 4.7.1: Reto matemático final

Si la pantalla mide 300 x 600 y establecemos una imagen con height: deviceHeight / 3 y width: deviceHeight / 3, ¿cuál será su tamaño?

200 x 200

Cálculo: 600 (alto) / 3 = 200. Tanto el alto como el ancho serán 200.

Conclusiones

Visibilidad

Las imágenes requieren siempre dimensiones para existir en el layout móvil.

Capas

Usa ImageBackground únicamente cuando necesites colocar elementos sobre una imagen.

Flujo

TouchableHighlight es el estándar para añadir interactividad a cualquier componente visual.

Adaptabilidad

Combina Flex y Dimensions para asegurar que tu diseño se vea bien en cualquier teléfono.

FIN

Lección terminada

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

AppRegistry.registerComponent('App', () => App);

El papel de AppRegistry

Aunque CodeHS lo oculta en ocasiones para simplificar la interfaz, AppRegistry es el punto de entrada que registra el componente raíz de tu aplicación.

Sin este registro, el sistema operativo móvil no sabría qué parte de tu código de JavaScript debe cargar al iniciar la ejecución.

AppRegistry.registerComponent('App', () => App);

!

Dato clave

Siempre incluiremos la importación de AppRegistry en nuestros ejercicios desarrollados por docentes.

Múltiples componentes Image

Podemos organizar varios componentes visuales dentro de un mismo contenedor View para crear interfaces ricas.

Combinando Image y Text

Es común añadir descripciones o subtítulos a nuestras imágenes. Los componentes se renderizan en el orden secuencial en que aparecen en el código.

<Image ... />
<Text style={styles.caption}>
  Gato bailarín
</Text>

Gato bailarín

Snapchat Login Page

En este ejercicio práctico, los estudiantes aprenderán a posicionar elementos complejos y utilizar recursos externos de diseño.

Objetivo:

Añadir la imagen icónica del fantasma de Snapchat al centro del bloque amarillo de tu interfaz de usuario.

URI: https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83

Snapchat: Implementación del Render

render() {
  return (
    <View style={styles.container}>
      <View style={styles.amarillo}>
        <Image
          source={{uri: 'https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83'}}
          style={{ width: 100, height: 100 }}
        />
      </View>
      {/* Los otros bloques de color se añaden a continuación */}
    </View>
  );
}

Snapchat: Estilos de la aplicación

amarillo: {
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'yellow',
  width: '100%',
  height: '70%',
},

rojo: {
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: 'red',
  width: '100%',
  height: '15%',
},

azul: {
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#279FF5',
  width: '100%',
  height: '15%',
},

Reproductor de música móvil

En este reto avanzado, los estudiantes construirán una interfaz completa para un reproductor multimedia de música.

Requerimientos visuales:

• • Portada del álbum (275 píxeles x 275 píxeles)
• • Información detallada de la pista
• • Barra de tiempo de reproducción
• • Controles de navegación responsivos

Your Top Songs 2018

This is the Song Name

Artist

Reproductor: Código de controles

Reproductor: Estilos avanzados

arrows: {
  margin: 25,
  height: 20,
  width: 30,
},

pause: {
  height: 70,
  width: 70,
},

playerControlsContainer: {
  flexDirection: 'row',
  marginTop: 20,
},

Google Search con imágenes

En este ejercicio, los estudiantes actualizan su interfaz de Google para utilizar activos gráficos reales en lugar de implementar simplemente colores planos.

Pista de diseño:

Puedes redondear las esquinas de un campo de texto utilizando las propiedades borderTopLeftRadius y borderBottomLeftRadius.

Buscar en la web ahora...

Google: Manejo de entrada y alertas

state = { searchText: '', }

<TextInput
  style={styles.searchBar}
  onChangeText={(searchText) => this.setState({searchText})}
  value={this.state.searchText}
/>

<TouchableHighlight
  style={styles.button}
  onPress={() => { alert('Buscando el término: ' + this.state.searchText) }}
>
  <Image source={{ uri: '...lupa...' }} style={{ height: 30, width: 30 }} />
</TouchableHighlight>

ImageBackground

¿Qué sucede si queremos colocar texto sobre una imagen de fondo? El componente Image estándar no permite tener elementos "hijos" en su estructura.

Para esto utilizamos ImageBackground. Funciona como un contenedor que dibuja una imagen debajo de todo lo que sitúes dentro.

Sintaxis técnica:

¡HOLA KAREL!

Quiz 4.2.2: Control de altura

Si la pantalla tiene 400 píxeles de alto, ¿cuál de estos ejemplos NO cubrirá toda la altura disponible?

A) height: 600

B) height: 400

✓ C) height: 200

Respuesta: Opción C. Únicamente cubrirá la mitad de la altura total de la pantalla.

Ejemplo: Hello, Universe!

<ImageBackground
  style={styles.background}
  source={{ uri: '...universo...' }}
>
  <View style={styles.textContainer}>
    <Text style={styles.paragraph}>
      ¡Hola, Universo!
    </Text>
  </View>
</ImageBackground>

¡Hola, Universo!

Ejercicio: Phone Background

Diseña la pantalla de inicio de tu propio dispositivo móvil utilizando componentes de fondo anidados.

Instrucciones técnicas:

• • Usa una imagen de fondo que cubra el 100%.
• • Añade la hora actual en formato grande.
• • Añade la fecha con un estilo minimalista.

5:41

Lunes, 12 de Febrero

Estilos del Phone Background

time: {
  textAlign: 'center',
  fontSize: 70,
  fontFamily: 'Helvetica',
  color: 'white',
},

date: {
  textAlign: 'center',
  fontSize: 20,
  fontFamily: 'Helvetica',
  color: 'white',
  marginTop: 20,
},

back: {
  height: '100%',
  width: '100%',
},

Interactividad móvil avanzada

Para que nuestras imágenes funcionen como botones interactivos, utilizamos el componente TouchableHighlight.

Este componente envuelve a cualquier elemento gráfico y detecta las pulsaciones que realizan los estudiantes en la pantalla táctil.

Quiz 4.3.2: Estructura interactiva

¿Cuál de estos códigos permite que la imagen de Karel sea interactiva?

A) <Image source={...} onPress={...} />

✓ B) <TouchableHighlight onPress={...}>
     <Image source={...} />
   </TouchableHighlight>

Dato: Las imágenes en React Native no poseen la propiedad onPress de forma nativa.

Ejercicio: Citas interactivas

Crea una aplicación que muestre una imagen de una figura histórica inspiradora.

Al presionar la imagen, se debe disparar un cuadro de alerta con una cita célebre de esa persona.

Ejemplo: Ada Lovelace

"Un barco en el puerto está seguro, pero no es para eso que están hechos los barcos."

ADA LOVELACE

Citas: Implementación del Alerta

<TouchableHighlight
  onPress={() => { alert('"Un barco en el puerto está seguro..."'); }}
>
  <Image
    source={{ uri: 'URL_ADA' }}
    style={{ height: 450, width: 375 }}
  />
</TouchableHighlight>

Flex Layouts Eficientes

El sistema Flex permite que los componentes se expandan para llenar el espacio disponible de forma dinámica.

La propiedad flex: 1 indica que un componente debe tomar todo el espacio que su contenedor padre le ceda.

Lógica de reparto:

Si tienes dos elementos con flex: 1, se dividirán el espacio al 50% cada uno.

flex: 1 (25%)

flex: 3 (75%)

Quiz 4.4.2: Proporciones Flex

¿Qué significa el valor flex: 1 para un componente hijo?

A) El componente siempre ocupará exactamente el 100% de la pantalla.

✓ El componente llenará cualquier espacio vacío de su contenedor padre.

Flex permite que la interfaz sea adaptable a cualquier tamaño de dispositivo.

Dirección de los Ejes

Column (Vertical)

Row (Horizontal)

Ejercicio: Rainbow Background

Crea un fondo de arcoíris utilizando siete franjas de colores proporcionales.

Aplica flex: 1 en cada una de las siete Views para que se distribuyan el alto total de la pantalla de forma equitativa.

Diseño de Banderas

Implementa relaciones de flex para replicar el diseño de la bandera de Sierra Leona.

Configuración del estilo:

• • Contenedor: flexDirection: 'row'
• • Color Azul: flex: 1
• • Color Blanco: flex: 1
• • Color Verde: flex: 1

Layout Avanzado: Suecia

Para construir diseños de mayor complejidad, es imperativo anidar contenedores con diferentes orientaciones.

container: { flexDirection: 'row' },
side: { flex: 2 },
center: { flex: 1, backgroundColor: '#F8CC46' }

Este diseño emplea tres columnas principales donde la central actúa como la franja vertical de la cruz.

Snapchat: Flex y Espaciado Proporcional

Refactoriza el diseño previo de tal manera que el bloque amarillo ocupe exactamente 5 de las 7 partes totales de la pantalla móvil.

Implementa flex: 5 para el bloque principal y flex: 1 para cada uno de los botones inferiores.

LOG IN

SIGN UP

Dimensions API

¿Cómo logramos que nuestra aplicación sea totalmente adaptable? Empleamos la API Dimensions.

Esto nos otorga la capacidad de obtener el ancho y alto precisos del dispositivo del estudiante en tiempo real.

let deviceHeight = Dimensions.get('window').height;
let deviceWidth = Dimensions.get('window').width;

Smart Phone

Tablet PC

Quiz 4.5.2: Lógica de dimensiones

¿Cuál es el método adecuado para asignar el ancho completo del dispositivo?

container: { deviceWidth, }

✓ container: { width: deviceWidth, }

Es imperativo emparejar siempre la propiedad de estilo con el valor de la variable obtenida.

Quiz 4.5.2: Matemáticas Aplicadas

Si necesitas que tres componentes llenen la altura total mediante Dimensions...

height: deviceHeight / 3

Este procedimiento nos otorga una precisión absoluta sobre el tamaño en píxeles de la interfaz móvil.

Quiz 4.5.2: Fuentes Adaptables

¿Qué expresión permite que el tamaño de la fuente sea siempre una décima parte de la altura total?

A) fontSize: deviceHeight * 10

✓ B) fontSize: deviceHeight / 10

C) fontSize: deviceHeight

Ejemplo: Cuadrícula con Dimensions

container: {
  height: deviceHeight,
  width: deviceWidth,
},
top: {
  height: deviceHeight / 2,
  flexDirection: 'row',
},
topLeft: {
  width: deviceWidth / 2,
  backgroundColor: 'blue',
}

Ejercicio: Rainbow v2 (Dimensions)

Refactoriza el arcoíris anterior para implementar la altura exacta calculada con Dimensions en lugar de usar flex.

red: {
  height: deviceHeight / 7,
  backgroundColor: 'red',
}

Snapchat: Layout Responsivo Final

Especificaciones:

• • División de pantalla en siete secciones iguales.
• • Tamaño de fuente: 1/30 del alto total disponible.
• • Dimensiones de imagen: Cuadrado perfecto de 1/10.

label: {
  fontSize: deviceHeight / 30,
  color: 'white',
  fontWeight: 'bold',
},
image: {
  height: deviceHeight / 10,
  width: deviceHeight / 10,
}

Snapchat: Código final responsivo

Scorekeeper v3 Pro

Eleva la calidad de tu marcador deportivo integrando fondos inmersivos y componentes visuales interactivos.

Novedades del proyecto:

• • Fondo fotográfico mediante ImageBackground.
• • Representación de equipos con íconos específicos.
• • Botonera optimizada con estilo de campo de juego.

FOOTBALL

TOUCHDOWN!

FIELD GOAL!

Scorekeeper: Fondo y Contenedor

render() {
  return (
    <View style={styles.container}>
      <ImageBackground
        style={{ height: deviceHeight, width: deviceWidth }}
        source={{ uri: 'https://...estadio...' }}
      >
        <View style={styles.container}>
          {/* Los elementos del marcador se anidan aquí */}
        </View>
      </ImageBackground>
  </View>
  );
}

Scorekeeper: Estética de los botones

button: {
  height: deviceHeight / 8,
  width: deviceWidth / 2.5,
  backgroundColor: 'green',
  borderColor: 'white',
  borderWidth: 2,
  alignItems: 'center',
  justifyContent: 'center',
  margin: 10,
},

buttonText: {
  color: 'white',
  fontSize: deviceHeight / 40,
  textAlign: 'center',
},

Quiz Avanzado 4.7.1: Importancia de Flex

¿Por qué es imperativo que el componente View que actúa como contenedor principal posea un valor de flex igual a 1?

Respuesta: Debido a que asignar a la View raíz un valor de flex: 1 garantiza que el contenedor ocupe la totalidad del espacio disponible en el dispositivo móvil.

Quiz Avanzado 4.7.1: Contenedores

¿Cuál de los siguientes componentes carece de la capacidad de albergar componentes hijos?

A) View component

B) ImageBackground component

✓ C) Image component

D) TouchableHighlight component

Quiz 4.7.1: Dimensiones forzadas

Considerando una imagen de 250x250 píxeles, si defines dimensiones de 100x250 píxeles, ¿cuál será el resultado visual?

La imagen se contraerá al tamaño especificado (preservando el gráfico completo, pero comprimido en el eje horizontal).

Aclaración: No es posible declarar dimensiones que difieran del tamaño nativo sin que se produzca un escalado.

Quiz 4.7.1: Aspect Ratio

¿Qué concepto define el Aspect Ratio?

La relación proporcional entre la anchura y la altura de un elemento visual.

Quiz 4.7.1: Análisis de salida

container: { flex: 1 },
yellowStripe: { flex: 1, backgroundColor: 'yellow' },
orangeStripe: { flex: 2, backgroundColor: 'orange' }

Quiz 4.7.1: Composición de elementos

redStripe: { flex: 4, backgroundColor: 'red', alignItems: 'center' },
orangeBox: { height: 200, width: 200, backgroundColor: 'orange' }

Quiz 4.7.1: Ajuste de Dimensiones

¿Cuál es el procedimiento para incrementar el tamaño de la estrella dentro del bloque naranja?

Incrementar explícitamente el ancho (width) y el alto (height) en el componente de imagen.

Modificar únicamente el contenedor no alterará las dimensiones de la imagen si esta posee valores fijos.

Quiz 4.7.1: Preservación Proporcional

Ante una imagen de 100 píxeles de alto y 200 de ancho, si elevas la altura a 300 píxeles, ¿qué anchura se requiere para mantener la proporción?

600 píxeles

Procedimiento: (300 / 100) * 200 = 600. La imagen se ha triplicado en altura, por lo que debe triplicarse en anchura.

Quiz 4.7.1: Alineación de Elementos

orangeStripe: { flex: 4, backgroundColor: 'orange', flexDirection: 'row' }

Al implementar la propiedad flexDirection: 'row', los elementos gráficos se alinean de forma horizontal.

Quiz 4.7.1: Flex en Diseño Real

PURPLE: 1

BLUE: 1

TEAL: 2

GREEN: 2

YELLOW: 4

¿Qué conjunto de valores de flex posibilitan el control de esta interfaz de usuario?

Cualquier conjunto numérico que respete la relación proporcional de tamaño (1:1:2:2:4) ejecutará el layout satisfactoriamente.

Quiz 4.7.1: Bandera Mediante Dimensions

top: { height: deviceHeight/5, flexDirection: 'row' },
bottom: { height: 4*(deviceHeight/5), flexDirection: 'row' },
topLeft: { width: 2*(deviceWidth/3), backgroundColor: 'red' },
topRight: { width: deviceWidth/3, backgroundColor: 'blue' }

Quiz 4.7.1: Atributos del Layout

Para desarrollar una bandera con franjas verticales, ¿qué atributo resulta estrictamente indispensable?

flexDirection: 'row'

Sin esta propiedad, las secciones de color se apilarían de forma vertical en lugar de lateral.

Quiz 4.7.1: Diferencias Estructurales

¿En qué divergen los componentes ImageBackground e Image?

I. El componente ImageBackground admite componentes hijos; el componente Image no.

II. Ambos componentes exigen declarar atributos de altura y anchura para ser renderizados.

Las afirmaciones I y II son correctas.

Quiz 4.7.1: Desafío de Cálculo Final

En una pantalla de 300 x 600, si defines una imagen con height: deviceHeight / 3 y width: deviceHeight / 3, ¿cuál será su magnitud final?

200 x 200

Razonamiento: 600 (alto total) / 3 = 200. Consecuentemente, tanto el alto como el ancho equivaldrán a 200 píxeles.

Conclusiones de la Sesión

Existencia Visual

Las imágenes demandan siempre dimensiones explícitas para manifestarse en el layout de la aplicación móvil.

Jerarquía de Capas

Emplea ImageBackground únicamente ante la necesidad de situar componentes adicionales sobre una imagen.

Flujo de Interacción

TouchableHighlight representa el estándar de la industria para otorgar interactividad a cualquier elemento gráfico.

Diseño Responsivo

Integra Flex y Dimensions para garantizar que tu diseño sea consistente en cualquier terminal móvil.

FIN

Lección completada

Mr. Norman Trujillo

ntrujillo@csa.edu.ni

Debes replicar la interfaz de Snapchat añadiendo la imagen del fantasma sobre un bloque amarillo. Sigue las especificaciones del docente para los botones inferiores.

Bloque Amarillo: 70% de altura, centrado absoluto.

Imagen URI: https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83

Botones: Rojo (15%) y Azul (15%) con texto en blanco y negrita.

Escribe el objeto de estilo para el bloque amarillo:

Escribe el código JSX para el componente Image dentro del bloque:

3. Fondos dinámicos: ImageBackground

A diferencia de Image, ImageBackground nos permite colocar componentes hijos sobre la imagen. Analiza el ejercicio del fondo del teléfono.

Ejercicio 3.1: Phone Background

Dibuja una línea de tiempo del renderizado de los componentes hijos dentro del fondo. ¿Qué componente se dibuja primero y cuál se ve al frente?

Ejercicio 3.2: Perfil de Julia Carson

Analiza el código de ejemplo del perfil. ¿Para qué sirve la propiedad borderWidth: 10 en el contenedor de la imagen?

4. Interactividad: TouchableHighlight

Para capturar clics o toques del estudiante, envolvemos nuestros elementos en un TouchableHighlight.

Reto: Citas interactivas

Cuando el estudiante presione la imagen de Ada Lovelace, se debe mostrar un alerta. Completa la función onPress:

<TouchableHighlight
  onPress={ () => __________________________________________________ }
>
  <Image source={{ uri: '...' }} style={{ height: 450, width: 375 }} />
</TouchableHighlight>

Explica con tus palabras qué hace la función anónima () => { ... }:

5. Flex Layout y Direcciones

El sistema Flex gestiona proporciones. Si el padre tiene tres hijos con flex: 1, cada uno ocupa 1/3 de la pantalla.

Ejercicio: Bandera de Suecia

Este diseño requiere anidamiento complejo. Describe cómo organizarías las Views para crear la cruz amarilla sobre el fondo azul.

Ejercicio: Fondo Arcoíris

Enumera los 7 colores requeridos en orden y especifica qué propiedad de estilo utilizarías para que las franjas sean horizontales:

6. Diseño Responsivo: API Dimensions

La API de Dimensions nos otorga el tamaño exacto en píxeles de cualquier teléfono móvil.

Problema matemático:

Si una pantalla mide 800 píxeles de alto y queremos una imagen que ocupe exactamente un cuarto de la altura, ¿qué valor de Dimensions aplicarías?

Ajuste de fuentes:

¿Cómo calcularías un fontSize que sea siempre la trigésima parte de la altura del dispositivo?

7. Proyecto: Scorekeeper Pt 3

En este ejercicio integrador, los estudiantes deben aplicar todos los conceptos: Imágenes, TouchableHighlight, Flex y Dimensions. Responde basándote en tu diseño propuesto:

1. ¿Qué imagen de fondo seleccionaste para el estadio y por qué utilizas ImageBackground en lugar de Image?

2. Explica la lógica utilizada para que tus botones verdes de puntuación tengan bordes blancos definidos:

8. Quiz final de conceptos

Responde brevemente a las siguientes preguntas técnicas:

A. ¿Qué sucede si das a una imagen de 200x200 dimensiones de 100x200?

B. ¿Por qué usamos AppRegistry.registerComponent al final de nuestro archivo principal?

C. Define con tus palabras qué es el “Aspect Ratio” y por qué es importante para los estudiantes de diseño visual.

Este material es de uso exclusivo para estudiantes de Principles of computer science.

Todos los derechos reservados. Docente responsable: Mr. Norman Trujillo.

Propiedad para franjas horizontales en el Arcoíris:

La propiedad es flexDirection: 'column' (que es la dirección por defecto en React Native). Cada hijo con flex: 1 se apilará verticalmente creando franjas horizontales.

6. Diseño Responsivo

Problema matemático (Cuarto de altura):

height: deviceHeight / 4. En una pantalla de 800px, el componente medirá exactamente 200px.

Ajuste de fuentes:

fontSize: deviceHeight / 30.

8. Quiz final de conceptos

A. La imagen se verá distorsionada. Al forzar una anchura menor (100) pero mantener la altura original (200), la imagen aparecerá "aplastada" lateralmente.

B. Porque es la instrucción que comunica a la plataforma nativa (iOS/Android) qué componente de JavaScript debe cargarse como raíz al iniciar la ejecución del paquete.

C. El Aspect Ratio es la relación proporcional entre el ancho y el alto de una imagen. Es vital porque permite redimensionar gráficos sin que pierdan su integridad visual o se deformen.

Documento confidencial para uso docente. Prohibida su reproducción sin autorización de Mr. Norman Trujillo.

2. Estructura de bloques: Snapchat Login Pt 1

Debes replicar la interfaz de usuario de Snapchat añadiendo la imagen del fantasma sobre un bloque amarillo. Sigue las especificaciones del docente para los botones inferiores de navegación.

Bloque Amarillo: 70% de altura, centrado absoluto.

Imagen URI: https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83

Botones: Rojo (15%) y Azul (15%) con texto en blanco y negrita.

Escribe el objeto de estilo para el bloque amarillo:

Escribe el código JSX para el componente Image dentro del bloque:

3. Fondos dinámicos: ImageBackground

A diferencia de Image, el componente ImageBackground permite colocar componentes hijos sobre la imagen. Analiza el ejercicio del fondo del teléfono.

Ejercicio 3.1: Phone Background

Dibuja una línea de tiempo del renderizado de los componentes hijos dentro del fondo. ¿Qué componente se dibuja primero y cuál se visualiza al frente?

Ejercicio 3.2: Perfil de Julia Carson

Analiza el código de ejemplo del perfil profesional. ¿Cuál es el propósito técnico de la propiedad borderWidth: 10 en el contenedor de la imagen?

4. Interactividad: TouchableHighlight

Para capturar toques del estudiante en la pantalla, envolvemos nuestros elementos en un TouchableHighlight.

Reto: Citas interactivas

Cuando el estudiante presione la imagen de Ada Lovelace, se debe mostrar un alerta. Completa la función onPress:

<TouchableHighlight
  onPress={ () => __________________________________________________ }
>
  <Image source={{ uri: '...' }} style={{ height: 450, width: 375 }} />
</TouchableHighlight>

Explica con tus palabras qué hace la función anónima () => { ... } en este contexto:

5. Flex Layout y Direcciones

El sistema Flex gestiona las proporciones de la interfaz. Si el padre posee tres hijos con flex: 1, cada uno ocupa la tercera parte de la pantalla móvil.

Ejercicio: Bandera de Suecia

Este diseño requiere un anidamiento complejo de contenedores. Describe cómo organizarías las Views para crear la cruz amarilla sobre el fondo azul.

Ejercicio: Fondo Arcoíris

Enumera los siete colores requeridos en orden y especifica qué propiedad de estilo utilizarías para que las franjas se orienten de forma horizontal:

6. Diseño Responsivo: API Dimensions

La API de Dimensions nos otorga el tamaño exacto en píxeles de cualquier teléfono móvil en tiempo real.

Problema matemático:

Si una pantalla mide 800 píxeles de alto y queremos una imagen que ocupe exactamente un cuarto de la altura, ¿qué valor de Dimensions aplicarías?

Ajuste de fuentes:

¿Cómo calcularías un fontSize que sea siempre la trigésima parte de la altura del dispositivo?

7. Proyecto: Scorekeeper Pt 3

En este ejercicio integrador, los estudiantes deben aplicar todos los conceptos: Imágenes, TouchableHighlight, Flex y Dimensions. Responde basándote en tu propuesta de diseño:

1. ¿Qué imagen de fondo seleccionaste para el estadio y por qué utilizas el componente ImageBackground en lugar de un Image simple?

2. Explica la lógica utilizada para que tus botones verdes de puntuación tengan bordes blancos definidos y visibles:

8. Quiz final de conceptos técnicos

Responde brevemente a las siguientes preguntas teóricas:

A. ¿Qué sucede con la estética si das a una imagen de 200 x 200 dimensiones de 100 x 200?

B. ¿Por qué es vital usar AppRegistry.registerComponent al final de nuestro archivo principal?

C. Define con tus palabras qué es el ‘Aspect Ratio’ y por qué resulta importante para los estudiantes de diseño de aplicaciones móviles.

Este material es de uso exclusivo para estudiantes de la clase de Principles of computer science.

Todos los derechos reservados. Docente responsable del curso: Mr. Norman Trujillo.

Se demanda un View raíz con la propiedad flexDirection establecida en ‘row’. Internamente, se organizan tres columnas principales: 1) View azul con flex: 2 (que contiene secciones azules y una franja amarilla horizontal), 2) View amarilla con flex: 1 (que forma la franja vertical de la cruz), 3) View azul con flex: 5 (que repite la estructura de franjas azules y amarilla horizontal).

Propiedad para franjas horizontales en el arcoíris:

La propiedad técnica es flexDirection: ‘column’ (la orientación predeterminada en el desarrollo con React Native). Cada componente hijo con flex: 1 se apilará de forma vertical, logrando así la creación de franjas horizontales que ocupan el ancho completo de la pantalla.

6. Diseño Responsivo

Problema matemático (Cuarto de altura):

Se debe implementar height: deviceHeight / 4. En un terminal móvil con pantalla de 800 píxeles, el componente gráfico medirá exactamente 200 píxeles.

Ajuste técnico de fuentes:

La expresión correcta es fontSize: deviceHeight / 30.

8. Quiz final de conceptos técnicos

A. La imagen presentará una distorsión visual evidente. Al imponer una anchura inferior (100) mientras se conserva la altura nativa (200), el gráfico se mostrará ‘aplastado’ de forma lateral.

B. Porque representa la instrucción fundamental que informa a la plataforma nativa (ya sea iOS o Android) cuál es el componente de JavaScript que debe actuar como raíz al momento de iniciar la ejecución del paquete de la aplicación móvil.

C. El Aspect Ratio es la relación proporcional constante entre el ancho y el alto de un elemento gráfico. Resulta vital porque faculta el redimensionamiento de las imágenes sin que estas pierdan su integridad estructural o sufran deformaciones antiestéticas.

Documento técnico confidencial para uso exclusivo de docentes. Prohibida su reproducción parcial o total sin el consentimiento de Mr. Norman Trujillo.