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

Visión General de Componentes Básicos

Siguiente ►
►

En este módulo, exploraremos los componentes básicos de React Native, que son los bloques de construcción fundamentales para cualquier aplicación. Estos componentes permiten crear interfaces de usuario ricas y responsivas. A lo largo de esta sección, aprenderás sobre los componentes más utilizados y cómo emplearlos en tus proyectos.

  1. Introducción a los Componentes Básicos

React Native proporciona una serie de componentes básicos que se utilizan para construir la interfaz de usuario. Estos componentes son similares a los elementos HTML en la web, pero están optimizados para aplicaciones móviles. Los componentes básicos más comunes incluyen:

  • View: Contenedor básico que soporta el diseño con Flexbox, estilo, y manejo de toques.
  • Text: Componente para mostrar texto.
  • Image: Componente para mostrar imágenes.
  • TextInput: Componente para la entrada de texto del usuario.
  • ScrollView: Contenedor que permite desplazarse por el contenido.
  • FlatList: Componente para mostrar listas de datos de manera eficiente.

  1. Componente View

El componente View es el contenedor más básico en React Native. Se utiliza para agrupar otros componentes y aplicar estilos.

Ejemplo de Uso de View

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>¡Hola, Mundo!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

Explicación del Código

  • View: Actúa como un contenedor para el componente Text.
  • StyleSheet: Utilizado para definir estilos de manera organizada.
  • flex: 1: Hace que el contenedor ocupe todo el espacio disponible.
  • justifyContent y alignItems: Centran el contenido dentro del contenedor.

  1. Componente Text

El componente Text se utiliza para mostrar texto en la pantalla.

Ejemplo de Uso de Text

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>¡Hola, Mundo!</Text>
      <Text style={styles.text}>Bienvenido a React Native</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

Explicación del Código

  • Text: Muestra el texto "¡Hola, Mundo!" y "Bienvenido a React Native".
  • style: Aplica estilos al texto, como el tamaño de fuente y el margen.

  1. Componente Image

El componente Image se utiliza para mostrar imágenes.

Ejemplo de Uso de Image

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

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

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

export default App;

Explicación del Código

  • Image: Muestra una imagen desde una URL.
  • style: Define el tamaño de la imagen.

  1. Componente TextInput

El componente TextInput se utiliza para la entrada de texto del usuario.

Ejemplo de Uso de TextInput

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

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Escribe aquí"
        onChangeText={text => setText(text)}
        value={text}
      />
      <Text style={styles.text}>{text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
    width: '80%',
  },
  text: {
    fontSize: 20,
  },
});

export default App;

Explicación del Código

  • TextInput: Permite al usuario ingresar texto.
  • onChangeText: Actualiza el estado text cada vez que el usuario escribe algo.
  • value: Vincula el valor del TextInput al estado text.

  1. Componente ScrollView

El componente ScrollView permite desplazarse por el contenido que excede el tamaño de la pantalla.

Ejemplo de Uso de ScrollView

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

const App = () => {
  return (
    <ScrollView style={styles.scrollView}>
      <Text style={styles.text}>Texto 1</Text>
      <Text style={styles.text}>Texto 2</Text>
      <Text style={styles.text}>Texto 3</Text>
      <Text style={styles.text}>Texto 4</Text>
      <Text style={styles.text}>Texto 5</Text>
      <Text style={styles.text}>Texto 6</Text>
      <Text style={styles.text}>Texto 7</Text>
      <Text style={styles.text}>Texto 8</Text>
      <Text style={styles.text}>Texto 9</Text>
      <Text style={styles.text}>Texto 10</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    marginHorizontal: 20,
  },
  text: {
    fontSize: 20,
    marginVertical: 10,
  },
});

export default App;

Explicación del Código

  • ScrollView: Permite desplazarse verticalmente por el contenido.
  • style: Aplica márgenes horizontales y estilos al texto.

  1. Componente FlatList

El componente FlatList se utiliza para mostrar listas de datos de manera eficiente.

Ejemplo de Uso de FlatList

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

const DATA = [
  { id: '1', title: 'Elemento 1' },
  { id: '2', title: 'Elemento 2' },
  { id: '3', title: 'Elemento 3' },
];

const App = () => {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.title}>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Explicación del Código

  • FlatList: Muestra una lista de elementos.
  • data: Proporciona los datos a la lista.
  • renderItem: Define cómo se renderiza cada elemento.
  • keyExtractor: Proporciona una clave única para cada elemento.

Conclusión

En esta sección, hemos cubierto los componentes básicos de React Native, incluyendo View, Text, Image, TextInput, ScrollView, y FlatList. Estos componentes son esenciales para construir cualquier aplicación en React Native. Asegúrate de practicar con estos componentes para familiarizarte con su uso y comportamiento.

En el próximo módulo, profundizaremos en el estilizado de componentes utilizando Flexbox y otras técnicas avanzadas. ¡Sigue practicando y nos vemos en el siguiente módulo!

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