React Native proporciona un conjunto de componentes principales — como View, Text, Image, ScrollView, TextInput — que se asignan a elementos de interfaz de usuario nativa. Son los bloques de construcción fundamentales de las interfaces de usuario de React Native, utilizados en lugar de elementos HTML web.
React Native uses its OWN components (mapping to native views), NOT HTML:
VIEW → a container (like a <div>) — the basic layout building block
TEXT → display text (ALL text must be inside a <Text>, unlike web)
IMAGE → display images (local or remote)
TEXTINPUT → text input field (like an <input>)
SCROLLVIEW → a scrollable container
FLATLIST → an efficient scrollable LIST (for long lists — renders lazily)
TOUCHABLEOPACITY / PRESSABLE → handle taps (touchable areas)
BUTTON → a basic button
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
function Profile() {
return (
<View style={styles.container}> {/* container (like a div) */}
<Image source={{ uri: 'https://...' }} style={styles.avatar} />
<Text style={styles.name}>Ann</Text> {/* text MUST be in <Text> */}
<TextInput placeholder="Email" />
<TouchableOpacity onPress={() => {}}>
<Text>Submit</Text>
</TouchableOpacity>
</View>
);
}
✓ Use <View> not <div>, <Text> not <p>/<span>; ALL text must be in <Text>
✓ No CSS classes/files — STYLING via a style prop (JS objects, StyleSheet) — see styling
✓ Touchables/Pressable for interactions (not onClick on divs)
✓ FlatList for long lists (efficient) — not mapping over everything
Comprender los componentes principales es fundamental para el desarrollo de React Native porque son los bloques de construcción de cada interfaz de usuario de React Native — los compones para construir interfaces, por lo que es conocimiento fundamental imprescindible.
React Native proporciona sus propios componentes que se asignan a vistas nativas (en lugar de elementos HTML web), y comprender los esenciales — View (el contenedor, como un div), Text (para todo el texto, con la regla importante de que todo el texto debe estar dentro de un componente Text, a diferencia de la web), Image, TextInput, ScrollView, FlatList (para listas largas eficientes), y touchables/Pressable (para manejar toques) — es necesario para construir cualquier interfaz de usuario de React Native.
Comprender las diferencias clave respecto a la web es particularmente importante para desarrolladores web/React que hagan la transición a React Native: usar View en lugar de div y Text en lugar de p/span (con la regla de todo-texto-en-Text), estilos a través de la propiedad style en lugar de archivos/clases CSS, usar touchables/Pressable para interacciones en lugar de onClick, y usar FlatList para listas largas (que se renderiza eficientemente/de forma perezosa) en lugar de mapear sobre todo — estas diferencias son obstáculos comunes que comprender los componentes principales aclara.
Los componentes se componen (como React) para construir interfaces, con View como el contenedor fundamental.
Dado que los componentes principales son los bloques de construcción de cada interfaz de usuario de React Native (los usas constantemente para construir interfaces) y comprenderlos y cómo difieren del HTML web es fundamental para crear aplicaciones de React Native (especialmente para desarrolladores web), comprender los componentes principales es conocimiento esencial y fundamental de React Native — el vocabulario básico de la interfaz de usuario de React Native, necesario para construir cualquier interfaz y para adaptar el conocimiento de web React al modelo de componentes nativo, una competencia central para el desarrollo de React Native.