Principles of Computer Science

Desarrollo de Aplicaciones Móviles

Maestría en
Interfaces Móviles

Docente: Mr. Norman Trujillo

ntrujillo@csa.edu.ni

React Native

CodeHS

El componente Image

Este componente es esencial para visualizar imágenes. Su uso requiere precisión en la definición de sus propiedades.

● Usa la propiedad source con un objeto que contiene la dirección uri.
● Es obligatorio establecer width y height.
Regla crítica:

Si omites la altura, la imagen no se renderizará en el dispositivo.

Sintaxis Estándar

<Image
  source={{ 
    uri: 'https://...' 
  }}
  style={{ 
    width: 250, 
    height: 250 
  }}
/>

Repaso del componente Image

Pregunta 1

¿Se mostrará una imagen si el código define el ancho pero no la altura?

Falso

Sin el atributo de altura, el componente reserva un espacio de cero píxeles, volviéndose invisible.

Pregunta 2

¿Cuál de estos formatos es compatible con el URI de una imagen?

✓ .png / .jpg / .gif

Formatos como .mp4 o .img no funcionan para este componente.

Ejemplo 4.1.3: Múltiples imágenes

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet, Image } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image
                    source={{ uri: 'https://img.freepik.com/free-vector/bird-colorful-gradient-design-vector_343694-2506.jpg' }}
                    style={{ height: 150, width: 150 }}
                />
                <Image
                    source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/768px-LEGO_logo.svg.png' }}
                    style={{ height: 150, width: 150 }}
                />
            </View>
        );
    }
}
AppRegistry.registerComponent('App', () => App);

Cada imagen debe tener su propio estilo definido para que el diseño sea predecible y ordenado dentro del contenedor principal.

Ejemplo 4.1.4: Combinación de componentes

Es posible mezclar componentes para crear interfaces descriptivas, como perfiles o tarjetas de información.

Estructura del código

<View style={styles.container}>
    <Image
        source={{ uri: 'https://media.tenor.com/6yMqezH9zcIAAAAM/cat-dance-dance-cat.gif' }}
        style={{ height: 200, width: 200 }}
    />
    <Text style={styles.caption}>
        {'\n'}Gato bailarín
    </Text>
</View>

🐱

Gato bailarín

Snapchat Login: Logo del fantasma

Integraremos el icónico logo del fantasma en el centro de nuestra pantalla de inicio amarilla.

Especificaciones

• URI: https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83
• Dimensiones: 100 x 100 píxeles.
• Centrado absoluto en el contenedor amarillo.

👻

Log in

Sign in

Music Player: Interfaz Visual

Diseñaremos una interfaz de reproductor que incluye arte de álbum y controles de audio usando componentes Image.

Componentes requeridos

1. Imagen de portada (275 x 275).
2. Textos para título, artista y tiempos.
3. Controles de audio inferiores (rewind, pause, forward).

Your Top Songs 2018

🎵

Nombre Canción

Nombre Artista

⏮️ ⏸️ ⏭️

El componente ImageBackground

Permite superponer componentes sobre una imagen de fondo de manera fluida y profesional.

Ejemplo de Uso

<ImageBackground 
  source={{ uri: '...' }}
  style={styles.back}
>
  <View style={styles.content}>
    <Text>Contenido superior</Text>
  </View>
</ImageBackground>

🌄

Fondo
Dinámico

Ejemplo 4.2.3: Hello Universe

Implementación de texto anidado dentro de una imagen de fondo.

<ImageBackground
  style={styles.background}
  source={{ uri: 'https://codehs.com/uploads/240e9bbd64286dfb4c58f85d6c8ac213' }}
>
  <View style={styles.textContainer}>
    <Text style={styles.paragraph}>
      Hello, Universe!
    </Text>
  </View>
</ImageBackground>

Hello,
Universe!

Ejercicio 4.2.4: Phone Background

Diseñaremos la pantalla de inicio de un teléfono móvil con hora y fecha centradas sobre un fondo estético.

Estructura del diseño

• Hora centrada con fontSize: 70.
• Fecha centrada con fontSize: 20.
• Imagen de fondo que cubre toda la pantalla (100%).

🏜️

5:41

Lunes, 15 de julio

Imágenes como botones

Para transformar una imagen en un elemento interactivo, la envolvemos en un componente TouchableHighlight.

onPress: Acción a ejecutar al tocar.

underlayColor: Color de fondo al presionar.

activeOpacity: Nivel de transparencia al pulsar.

<TouchableHighlight
  onPress={() => alert('¡Click!')}
  underlayColor="#DDDDDD"
>
  <Image 
    source={{ uri: '...' }}
    style={styles.imagenBoton}
  />
</TouchableHighlight>

Ejemplo 4.3.3: Alertas táctiles

En este ejemplo, al tocar la imagen de Karel se dispara una alerta sonora y visual.

<TouchableHighlight
  onPress={() => { alert('Karel says "Woof Woof!"'); }}
>
  <Image
    source={{ uri: 'https://static.codehs.com/img/courses/introkarel/1.png' }}
    style={{ height: 200, width: 200 }}
  />
</TouchableHighlight>

🐶

Click me!

Ejercicio 4.3.4: Interactive Quotes

Diseñaremos una tarjeta biográfica donde la imagen actúe como un disparador de frases famosas.

Frase Celebre

“Un barco en el puerto está seguro, pero para eso no son los barcos. Sal al mar y haz cosas nuevas.”

👩‍💻

Ada Lovelace

Toca la imagen para ver la frase

Layouts con Flex

El valor flex define la proporción de espacio que un componente toma respecto a sus hermanos.

Lógica de proporciones

▶ Si un hijo tiene flex: 1 y otro flex: 2, el segundo será el doble de grande.
▶ El espacio total se divide por la suma de todos los valores flex definidos.

flex: 1

flex: 2

flex: 7

Ejercicio 4.4.5: Banderas Nacionales

Utilizando contenedores anidados y proporciones de flex, recrearemos diseños de banderas.

Sierra Leona

container: { flex: 1, flexDirection: 'row' },
blue: { flex: 1, backgroundColor: '#2975C1' },
white: { flex: 1, backgroundColor: '#FFFFFF' },
green: { flex: 1, backgroundColor: '#54B14C' }

Diseño Responsivo con Dimensions

Para que una aplicación se adapte a cualquier pantalla, obtenemos el tamaño dinámico del dispositivo.

Importación Dinámica

import { Dimensions } 
  from 'react-native';

const deviceHeight = 
  Dimensions.get('window')
  .height;

Escalado de fuentes

Asegura que el texto mantenga la misma proporción en cualquier resolución:

fontSize: deviceHeight / 10

“Esto garantiza una interfaz consistente siempre.”

Proyecto Integrador: Scorekeeper Pro

Uniremos todos los conceptos: Imágenes, Interactividad, Flex y Responsividad en una sola aplicación completa.

Características Clave

Fondo dinámico con ImageBackground.
Controles táctiles con TouchableHighlight.
Layout responsivo usando Dimensions.

🏟️

Scorekeeper Pro

Team 1

21

Team 2

14

+TD

+FG

RN

¡Desafío cumplido!

Recordatorios finales

★ Importa siempre AppRegistry.
★ Registra el componente al final del código.
★ Verifica las dimensiones de cada Image.

Código de Registro

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

¡A programar!

Maestría en Interfaces Móviles

Maestría en Interfaces Móviles Guía de Autoestudio

Maestría en Interfaces Móviles Slides Finales

Maestría en Interfaces Móviles Slides Finales Finales

Similar Lessons

Naming Knockout

Visconti Science

Diseños avanzados en React Native

Norman René Trujillo Zapata

Maestría en Interfaces Reactiva

Norman René Trujillo Zapata

Detective Quest: The Missing Phone

Priyadarshini Bharath

Lunar Cycles and Lore

Kathleen Basoco

Precision Lab

The Viral Broadcast

Andrew Tarara

BandLab Beatmaker

Andrew Tarara

Paper to Playlist

Andrew Tarara

The Sound of Science

Andrew Tarara

Systems and Stability

Austin WIllis

Cell Energy Cycle

Austin WIllis

Diseño de interfaces móviles avanzadas

Norman René Trujillo Zapata

Diseño estructural y gestión visual avanzada

Norman René Trujillo Zapata

React Native Dinámico

Norman René Trujillo Zapata

Life Layers

Tricia Lucie

Interfaces Dinámicas en React Native

Norman René Trujillo Zapata

React Native UI Mastery

Norman René Trujillo Zapata

Diseño visual y layouts en React Native

Norman René Trujillo Zapata