React Native (RN) es un framework de JavaScript que permite a los desarrolladores crear aplicaciones móviles nativas para iOS y Android usando el mismo código base. Esto se traduce en un ahorro significativo de tiempo y recursos.
Desarrollado por Facebook, React Native usa componentes y APIs similares a los de React (la biblioteca popular para aplicaciones web).
<div>, <span>, <button>.<View>, <Text>, <Button>.StyleSheet (JS puro, similar a Flexbox).Construye interfaces de usuario con componentes reutilizables como View, Text, Image, ScrollView y TextInput.
Los componentes son la base de React Native.
import React from 'react';
import { View, Text } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<View>
<Text>Hola, Mundo!</Text>
</View>
);
};
export default MiComponente;Los props son similares a los atributos en HTML. Se definen como un objeto y se pasan al componente. Permiten pasar datos de un componente padre a un componente hijo. Son de solo lectura.
import React from 'react';
import { View, Text } from 'react-native';
// Componente funcional
const MiComponente = (props) => {
return (
<View>
<Text>{props.mensaje}</Text>
</View>
);
};
export default MiComponente;El componente View es el contenedor más básico en React Native. Se utiliza para crear la estructura de la interfaz de usuario.
es un contenedor básico similar a un <div> en HTML. Permite anidar otros componentes.
import React from 'react';
import { View, Text } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hola, Mundo!</Text>
</View>
);
};
export default MiComponente;El componente Text se utiliza para mostrar texto en la pantalla. Permite aplicar estilos y formateo.
import React from 'react';
import { Text } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<Text style={{ fontSize: 20, color: 'blue' }}>
Hola, Mundo!
</Text>
);
};
export default MiComponente;El componente Image se utiliza para mostrar imágenes. Permite cargar imágenes locales o remotas.
import React from 'react';
import { Image } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<Image
source={{ uri: 'https://ejemplo.com/imagen.png' }}
style={{ width: 100, height: 100 }}
/>
);
};
export default MiComponente;El componente ScrollView permite crear listas desplazables. Es útil para mostrar contenido que no cabe en la pantalla.
import React from 'react';
import { ScrollView, Text } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<ScrollView>
<Text>Elemento 1</Text>
<Text>Elemento 2</Text>
<Text>Elemento 3</Text>
{/* Más elementos */}
</ScrollView>
);
};
export default MiComponente;El componente TextInput se utiliza para recibir entradas de texto del usuario. Permite manejar eventos como onChangeText.
import React, { useState } from 'react';
import { View, TextInput } from 'react-native';
// Componente funcional
const EntradaTexto = () => {
const [texto, setTexto] = useState('');
return (
<View>
<TextInput
placeholder="Escribe aqui..."
value={texto}
onChangeText={setTexto}
/>
<Text>{texto}</Text>
</View>
);
};
export default EntradaTexto;Los estilos en React Native se gestionan de forma distinta a CSS tradicional.
En lugar de clases, se utilizan objetos de estilo que se aplican directamente a los componentes mediante la propiedad style.
Puedes emplear propiedades como flex, margin, padding o backgroundColor.
Estos estilos se definen como objetos en JavaScript usando StyleSheet, utilizando notación camelCase en lugar del formato estándar de CSS.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<View style={styles.container}>
<Text style={styles.texto}>Hola, Mundo!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0'
},
texto: {
fontSize: 20,
color: 'blue'
}
})
export default MiComponente;Los estilos en línea se aplican directamente a los componentes mediante la propiedad style.
Se recomienda usar StyleSheet para mantener el código limpio y organizado.
import React from 'react';
import { View, Text } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, color: 'blue' }}>Hola, Mundo!</Text>
</View>
);
};
export default MiComponente;Los estilos globales se pueden definir en un archivo separado y luego importar en los componentes que los necesiten. Esto ayuda a mantener el código limpio y organizado.
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
// Componente funcional
const MiComponente = () => {
return (
<View style={styles.container}>
<Text style={styles.texto}>Hola, Mundo!</Text>
</View>
);
};
export default MiComponente;
/**
* Archivo de estilos styles.js
* Se definen los estilos en un archivo separado y se importan en el componente.
*/
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0'
},
texto: {
fontSize: 20,
color: 'blue'
}
});Flexbox es el sistema de diseño utilizado en React Native. Permite crear diseños responsivos y flexibles.
Se basa en contenedores y elementos flexibles. Los contenedores pueden tener propiedades como flexDirection, justifyContent, alignItems, etc.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
// Componente funcional
const MiComponente = () => {
return (
<View style={styles.container}>
<Text style={styles.texto}>Elemento 1</Text>
<Text style={styles.texto}>Elemento 2</Text>
<Text style={styles.texto}>Elemento 3</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f0f0f0'
},
texto: {
fontSize: 20,
color: 'blue'
}
})
}
export default MiComponente;react-native-responsive-fontsize.resizeMode en el componente Image.React Native te permite crear aplicaciones móviles nativas de alta calidad de manera eficiente y rentable. Con una gran comunidad, herramientas poderosas y una curva de aprendizaje razonable (especialmente si ya conoces React), aprender React Native es una excelente inversión para cualquier desarrollador web o móvil.