React Native pateikia pagrindinių komponentų rinkinį — tokius kaip View, Text, Image, ScrollView, TextInput — kurie atitinka gimtąsias UI elemenlas. Tai yra pagrindiniai React Native vartotojo sąsajų pastatų akmenys, naudojami vietoje žiniatinklio HTML elementų.
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
Suprasti pagrindinius komponentus yra esminė React Native kūrimui, nes jie yra kiekvienos React Native vartotojo sąsajos pastatų akmenys — jūs juos sujungiate, norėdami sukurti sąsajas, todėl tai yra privaloma pagrindinė žinių sritis.
React Native suteikia savus komponentus, kurie atitinka gimtąsias peržiūras (o ne žiniatinklio HTML elementus), ir supratimas apie esminius — View (konteineris, panašus į div), Text (visam tekstui, su svarbia taisykle, kad visas tekstas turi būti Text komponento viduje, skirtingai nei žiniatinklyje), Image, TextInput, ScrollView, FlatList (efektyviai ilgiems sąrašams), ir touchables/Pressable (bakstelėjimams tvarkyti) — yra būtina bet kuriai React Native vartotojo sąsajai sukurti.
Supratimas apie pagrindinius skirtumus nuo žiniatinklio yra ypač svarbus žiniatinklio/React kūrėjams, pereinantiems prie React Native: View vietoje div ir Text vietoje p/span (su visas-tekstas-Text viduje taisykle), stilius per style savybę vietoje CSS klasių/failų, touchables/Pressable naudojimas sąveikai tvarkyti vietoje onClick, ir FlatList naudojimas ilgiems sąrašams (kuris atlieka efektyvų/tinkamai atideliojamą atvaizdarymą) vietoje mapavimo iš viso — šie skirtumai yra dažnos kvapavimo vietos, kurias pagrindinių komponentų supratimas paaiškina.
Komponentai susideda (panašiai kaip React) sąsajoms kurti, o View yra pagrindinis konteineris.
Kadangi pagrindiniai komponentai yra kiekvienos React Native vartotojo sąsajos pastatų akmenys (nuolat juos naudojate sąsajoms kurti) ir jų supratimas bei tai, kaip jie skiriasi nuo žiniatinklio HTML, yra esminė React Native programoms kurti (ypač žiniatinklio kūrėjams), pagrindinių komponentų supratimas yra neatsiejama, pagrindinė React Native žinių sritis — pagrindinė React Native vartotojo sąsajos leksika, būtina bet kuriai sąsajai kurti ir norint pritaikyti žiniatinklio React žinias gimtojo komponento modeliui, pagrindinė React Native kūrimo kompetencija.