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 Slides Finales Finales

Maestría en Interfaces Móviles Slides Finales Finales

Similar Materials

Canopy Crusaders Teacher Guide

MaryAnn Mehler

Deforestation Dilemma Activity

MaryAnn Mehler

Carbon Sponge Activity

MaryAnn Mehler

Green Cathedral Activity

MaryAnn Mehler

Solubility Showdown Teacher Guide

Raino Bhatti

Solubility Showdown Stations

Raino Bhatti

Solubility Showdown Slides

Raino Bhatti

Power Surge Teacher Guide

Christin Anderson

Power Surge Worksheet

Christin Anderson

Power Surge Slides

Christin Anderson

Bio Graphing Stations Answer Key

MELANIE.ROBERTS

Bio Graphing Station Activity Cards

MELANIE.ROBERTS

Pocket Mouse Teacher Guide

Carissa Fenner

Pocket Mouse Lab Notebook

Carissa Fenner

Pocket Mouse Station Cards

Carissa Fenner

Bio Graphing Answer Key Guide B

MELANIE.ROBERTS

Bio Graphing Masters Practice Packet B

MELANIE.ROBERTS

Bio Graphing Answer Key Guide

MELANIE.ROBERTS

Bio Graphing Masters Worksheet Packet

MELANIE.ROBERTS

Chemistry Conqueror Teacher Guide

Victoria Bunzick

Chemistry Conqueror Reference Sheet

Victoria Bunzick

Chemistry Conqueror Study Guide

Victoria Bunzick

Canopy Chemistry Teacher Guide

Canopy Chemistry Worksheet

Evaluation Correction Guide

Biologie Végétale Évaluation

Adaptation Végétale Diaporama

Multiplication Horticole Fiche TP

Cycle Vie Diaporama

Moteur Solaire Fiche Activité

Moteur Solaire Diaporama

Architecture Végétale Fiche Activité

Architecture Végétale Diaporama

Syntropie Flash Exercices

Prévost Soazic

Syntropie Flash Fiche

Prévost Soazic

Expedition Teacher Tour Guide

kankelj

Expedition Slides Template

kankelj

Expedition Student Guide Rubric

kankelj

Life Balance Teacher Guide

MELANIE.ROBERTS

Life Balance Quiz

MELANIE.ROBERTS

Life Balance Exit Tickets

MELANIE.ROBERTS

Life Balance Bellringers

MELANIE.ROBERTS

Feedback Loops Teacher Key

MELANIE.ROBERTS

Feedback Loops Practice Worksheet

MELANIE.ROBERTS