El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Texto, Vista e Imagen

Siguiente ►
►

En este tema, aprenderemos sobre tres de los componentes básicos más utilizados en React Native: Text, View e Image. Estos componentes son fundamentales para construir interfaces de usuario en aplicaciones móviles.

  1. Componente Text

El componente Text se utiliza para mostrar texto en la pantalla. Es uno de los componentes más simples y esenciales en React Native.

Ejemplo Básico

import React from 'react';
import { Text, View } from 'react-native';

const App = () => {
  return (
    <View>
      <Text>¡Hola, Mundo!</Text>
    </View>
  );
};

export default App;

Explicación

  • import { Text, View } from 'react-native';: Importamos los componentes Text y View desde la biblioteca react-native.
  • <Text>¡Hola, Mundo!</Text>: Utilizamos el componente Text para mostrar el texto "¡Hola, Mundo!".

Propiedades Comunes del Componente Text

  • style: Permite aplicar estilos al texto.
  • numberOfLines: Limita el número de líneas que se mostrarán.
  • onPress: Maneja eventos de toque en el texto.

Ejemplo con Propiedades

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text} numberOfLines={1} onPress={() => alert('Texto presionado')}>
        ¡Hola, Mundo! Este es un texto largo que debería truncarse.
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
});

export default App;

  1. Componente View

El componente View es un contenedor básico que se utiliza para agrupar otros componentes y aplicar estilos de diseño.

Ejemplo Básico

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <Text>Texto dentro de una vista</Text>
    </View>
  );
};

export default App;

Explicación

  • <View style={{ padding: 20 }}>: Aplicamos un estilo de padding al componente View para agregar espacio alrededor del texto.

Propiedades Comunes del Componente View

  • style: Permite aplicar estilos al contenedor.
  • onLayout: Maneja cambios en el diseño del contenedor.
  • accessibilityLabel: Proporciona una etiqueta accesible para el contenedor.

Ejemplo con Propiedades

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Texto dentro de una vista estilizada</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
});

export default App;

  1. Componente Image

El componente Image se utiliza para mostrar imágenes en la aplicación.

Ejemplo Básico

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

const App = () => {
  return (
    <View>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={{ width: 50, height: 50 }}
      />
    </View>
  );
};

export default App;

Explicación

  • source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}: Especificamos la fuente de la imagen utilizando una URL.
  • style={{ width: 50, height: 50 }}: Aplicamos un estilo para definir el tamaño de la imagen.

Propiedades Comunes del Componente Image

  • source: Define la fuente de la imagen.
  • style: Permite aplicar estilos a la imagen.
  • resizeMode: Define cómo se ajusta la imagen dentro de su contenedor (cover, contain, stretch, repeat, center).

Ejemplo con Propiedades

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

const App = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
        resizeMode="contain"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default App;

Ejercicio Práctico

Descripción

Crea una aplicación que muestre un texto, una vista con un fondo de color y una imagen. El texto debe ser presionable y mostrar una alerta cuando se presione.

Solución

import React from 'react';
import { View, Text, Image, StyleSheet, Alert } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text} onPress={() => Alert.alert('Texto presionado')}>
        Presiona este texto
      </Text>
      <View style={styles.box}>
        <Text>Texto dentro de una vista con fondo de color</Text>
      </View>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
        resizeMode="cover"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
    color: 'blue',
    marginBottom: 20,
  },
  box: {
    backgroundColor: '#add8e6',
    padding: 20,
    marginBottom: 20,
  },
  image: {
    width: 100,
    height: 100,
  },
});

export default App;

Explicación

  • Alert.alert('Texto presionado'): Muestra una alerta cuando se presiona el texto.
  • style={styles.box}: Aplica un fondo de color y padding a la vista.
  • resizeMode="cover": Ajusta la imagen para cubrir el área del contenedor.

Conclusión

En esta lección, hemos aprendido sobre los componentes Text, View e Image en React Native. Estos componentes son fundamentales para construir interfaces de usuario y se utilizan en casi todas las aplicaciones. Asegúrate de practicar con estos componentes para familiarizarte con sus propiedades y usos. En la próxima lección, exploraremos cómo estilizar componentes utilizando Flexbox.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados