React Native fornece um conjunto de componentes principais — como View, Text, Image, ScrollView, TextInput — que mapeiam para elementos nativos de UI. Eles são os blocos de construção fundamentais das UIs do React Native, utilizados em vez de elementos HTML da 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
Compreender os componentes principais é fundamental para o desenvolvimento em React Native porque eles são os blocos de construção de toda UI do React Native — você os compõe para construir interfaces, portanto é conhecimento de fundação imprescindível.
O React Native fornece seus próprios componentes que mapeiam para visualizações nativas (em vez de elementos HTML da web), e compreender os essenciais — View (o container, como uma div), Text (para todo texto, com a regra importante de que todo texto deve estar dentro de um componente Text, diferentemente da web), Image, TextInput, ScrollView, FlatList (para listas longas eficientes), e touchables/Pressable (para lidar com toques) — é necessário para construir qualquer UI do React Native.
Compreender as diferenças principais em relação à web é particularmente importante para desenvolvedores web/React transitando para React Native: usar View em vez de div e Text em vez de p/span (com a regra de que todo texto fica em Text), estilizar via a prop style em vez de classes/arquivos CSS, usar touchables/Pressable para interações em vez de onClick, e usar FlatList para listas longas (que renderiza eficiente/preguiçosamente) em vez de mapear tudo — essas diferenças são armadilhas comuns que compreender os componentes principais esclarece.
Os componentes se compõem (como em React) para construir UIs, com View como o container fundamental.
Como os componentes principais são os blocos de construção de toda UI do React Native (você os utiliza constantemente para construir interfaces) e compreendê-los e como diferem do HTML da web é fundamental para construir aplicativos React Native (especialmente para desenvolvedores web), entender os componentes principais é conhecimento essencial e fundamental do React Native — o vocabulário básico da UI do React Native, necessário para construir qualquer interface e para adaptar conhecimento de React web ao modelo de componentes nativo, uma competência principal para desenvolvimento em React Native.