React Native tarjoaa joukon ydinkomponentteja — kuten View, Text, Image, ScrollView, TextInput — jotka yhdistetään natiiveihin käyttöliittymäelementteihin. Ne ovat React Nativen käyttöliittymien perusrakennuspalikoita, joita käytetään verkon HTML-elementtien sijaan.
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
Ydinkomponenttien ymmärtäminen on olennaista React Native -kehitykselle, koska ne ovat jokaisen React Native käyttöliittymän perusrakennuspalikoita — yhdistät niitä käyttöliittymien rakentamiseen, joten se on välttämätöntä perustietoa.
React Native tarjoaa omia komponentteja, jotka yhdistetään natiiveihin näkymiin (eikä verkon HTML-elementteihin), ja oleellisten komponenttien ymmärtäminen — View (säilö, kuten div), Text (kaikelle tekstille tärkeällä säännöllä, että kaikki teksti on oltava Text-komponentin sisällä, toisin kuin verkossa), Image, TextInput, ScrollView, FlatList (tehokkaille pitkille luetteloille), ja touchables/Pressable (tapausten käsittelyyn) — on välttämätöntä minkä tahansa React Native käyttöliittymän rakentamiseen.
Tärkeimpien erojen ymmärtäminen verkkoon verrattuna on erityisen tärkeää verkon/React-kehittäjille, jotka siirtyvät React Nativeen: View-käytön sijaan div ja Text p/span:n sijaan (kaikki-teksti-Text-säännöllä), tyylittely style-ominaisuuden kautta CSS-luokkien/tiedostojen sijaan, touchables/Pressable käyttäminen vuorovaikutuksiin onClick:n sijaan, ja FlatList:n käyttäminen pitkille luetteloille (joka hahmontaa tehokkaasti/laiskasti) kaiken kartoituksen sijaan — nämä erot ovat yleisiä esteitä, joita ydinkomponenttien ymmärtäminen selventää.
Komponentit yhdistetään (kuten React) käyttöliittymien rakentamiseen ja View on perusrakennuspalkki.
Koska ydinkomponentit ovat jokaisen React Native käyttöliittymän perusrakennuspalikoita (käytät niitä jatkuvasti käyttöliittymien rakentamiseen) ja niiden ymmärtäminen ja niiden eroavaisuus verkon HTML:stä on olennaista React Native -sovellusten rakentamiselle (erityisesti verkon kehittäjille), ydinkomponenttien ymmärtäminen on olennaista, perustavaa React Native -tietoa — React Nativen käyttöliittymän perossanastoa, jota tarvitaan minkä tahansa käyttöliittymän rakentamiseen ja verkon React -tietojen sovittamiseen natiiviin komponenttimalliin, React Native -kehityksen ydinosaamista.