Componentes Principales y APIs

Componentes Principales

React Native proporciona un conjunto de componentes nativos que se mapean directamente a widgets nativos de la plataforma.

View - El Contenedor Basico

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

function MiComponente() {
  return (
    <View style={styles.container}>
      <View style={styles.caja}>
        {/* Contenido aqui */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  caja: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    borderRadius: 10,
  },
});

View es como <div> en web. Es el bloque de construccion fundamental para la UI.

Text - Mostrando Texto

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

function Textos() {
  return (
    <View>
      <Text style={styles.titulo}>Titulo Principal</Text>
      <Text style={styles.parrafo}>
        Este es un parrafo de texto. En React Native,
        todo el texto debe estar dentro de un componente Text.
      </Text>
      <Text>
        <Text style={styles.negrita}>Negrita</Text>
        {' y '}
        <Text style={styles.cursiva}>cursiva</Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  titulo: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  parrafo: {
    fontSize: 16,
    lineHeight: 24,
    color: '#666',
  },
  negrita: { fontWeight: 'bold' },
  cursiva: { fontStyle: 'italic' },
});

Image - Mostrando Imagenes

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

function Imagenes() {
  return (
    <View>
      {/* Imagen local */}
      <Image
        source={require('./assets/foto.png')}
        style={styles.imagen}
      />

      {/* Imagen de red */}
      <Image
        source={{ uri: 'https://ejemplo.com/imagen.jpg' }}
        style={styles.imagen}
      />

      {/* Con propiedades adicionales */}
      <Image
        source={{ uri: 'https://ejemplo.com/imagen.jpg' }}
        style={styles.imagen}
        resizeMode="cover"
        onLoad={() => console.log('Imagen cargada')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  imagen: {
    width: 200,
    height: 200,
    borderRadius: 10,
  },
});

ScrollView - Contenido Desplazable

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

function ContenidoLargo() {
  return (
    <ScrollView style={styles.contenedor}>
      <Text style={styles.titulo}>Articulo Largo</Text>
      <Text style={styles.parrafo}>
        Mucho contenido aqui...
      </Text>
      {/* Mas contenido */}
    </ScrollView>
  );
}

// ScrollView horizontal
function GaleriaHorizontal() {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
    >
      {imagenes.map(img => (
        <Image key={img.id} source={img.src} style={styles.imagen} />
      ))}
    </ScrollView>
  );
}

FlatList - Listas Optimizadas

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

const DATOS = [
  { id: '1', titulo: 'Primer Item' },
  { id: '2', titulo: 'Segundo Item' },
  { id: '3', titulo: 'Tercer Item' },
];

function MiLista() {
  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text style={styles.titulo}>{item.titulo}</Text>
    </View>
  );

  return (
    <FlatList
      data={DATOS}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separador} />}
      ListHeaderComponent={() => <Text>Encabezado</Text>}
      ListFooterComponent={() => <Text>Pie</Text>}
      ListEmptyComponent={() => <Text>Sin datos</Text>}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 20,
    backgroundColor: '#fff',
  },
  titulo: {
    fontSize: 18,
  },
  separador: {
    height: 1,
    backgroundColor: '#eee',
  },
});

TouchableOpacity - Botones Presionables

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

function Boton({ titulo, onPress }) {
  return (
    <TouchableOpacity
      style={styles.boton}
      onPress={onPress}
      activeOpacity={0.7}
    >
      <Text style={styles.textoBoton}>{titulo}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  boton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  textoBoton: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

TextInput - Entrada de Texto

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

function FormularioEntrada() {
  const [texto, setTexto] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View>
      <TextInput
        style={styles.input}
        placeholder="Escribe aqui..."
        value={texto}
        onChangeText={setTexto}
      />

      <TextInput
        style={styles.input}
        placeholder="Contrasena"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />

      <TextInput
        style={[styles.input, styles.multilinea]}
        placeholder="Mensaje"
        multiline
        numberOfLines={4}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    marginBottom: 12,
  },
  multilinea: {
    height: 100,
    textAlignVertical: 'top',
  },
});