0Pricing
React Academy · Lekcja

Podstawowe komponenty React Native a DOM w przeglądarce

Mapowanie View/Text/Image/ScrollView na ich odpowiedniki w DOM oraz poznanie modelu bridge.

Podstawowe komponenty React Native a DOM w przeglądarce to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dlaczego w React Native nie ma HTML

React Native renderuje natywne komponenty interfejsu iOS i Androida, a nie przeglądarkowy DOM. Nie ma tu elementów <div>, <p> ani <img> — każda platforma ma własne natywne elementy bazowe.

View — odpowiednik div

View jest najbardziej podstawowym kontenerem układu w React Native. Odwzorowuje UIView w iOS oraz android.view.View w Androidzie. Można myśleć o nim jak o elemencie <div>, który nie może bezpośrednio zawierać tekstu.

import { View, StyleSheet } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      {/* children go here */}
    </View>
  );
}

const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 8 } });

Text — odpowiednik p/span

Text jest wymagany dla każdego widocznego tekstu. W przeciwieństwie do aplikacji internetowych nie można umieścić ciągu znaków bezpośrednio w View — musi on być opakowany w <Text>.

import { View, Text } from 'react-native';

function Greeting() {
  return (
    <View>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Hello!</Text>
      <Text>Welcome to React Native.</Text>
    </View>
  );
}

Image — odpowiednik img

Image renderuje obrazy. Należy użyć właściwości source z wywołaniem require() dla zasobów lokalnych lub obiektu { uri: '...' } dla obrazów z sieci.

import { Image } from 'react-native';

// Local asset:
<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

// Network image (must provide dimensions):
<Image source={{ uri: 'https://example.com/photo.jpg' }} style={{ width: 200, height: 150 }} />

ScrollView — odpowiednik overflow:scroll

ScrollView jest przewijalnym kontenerem. W przeciwieństwie do aplikacji internetowych trzeba użyć go jawnie — View nie przewija zawartości. W przypadku długich list należy preferować FlatList.

import { ScrollView, Text } from 'react-native';

function Article({ paragraphs }) {
  return (
    <ScrollView>
      {paragraphs.map((p, i) => <Text key={i}>{p}</Text>)}
    </ScrollView>
  );
}

FlatList — lista wirtualizowana

FlatList renderuje tylko widoczne elementy, ponownie wykorzystując te znajdujące się poza ekranem — jest to niezbędne dla wydajności przy dużych zbiorach danych.

import { FlatList, Text, View } from 'react-native';

function UserList({ users }) {
  return (
    <FlatList
      data={users}
      keyExtractor={u => u.id}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  );
}

TouchableOpacity — odpowiednik button

TouchableOpacity (a w nowszych wersjach RN także Pressable) zapewnia reakcję na dotyk dowolnego widoku. Właściwość onPress obsługuje dotknięcia.

import { TouchableOpacity, Text } from 'react-native';

function Button({ onPress, title }) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}

TextInput — odpowiednik input

TextInput jest kontrolowanym polem wejściowym. Obsługuje właściwości value, onChangeText, placeholder oraz typy klawiatury.

import { TextInput, useState } from 'react-native';

function SearchBar() {
  const [query, setQuery] = useState('');
  return (
    <TextInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search..."
      keyboardType="default"
    />
  );
}

ActivityIndicator — wskaźnik ładowania

ActivityIndicator jest natywnym wskaźnikiem ładowania. W systemie iOS jest to okrągły wskaźnik, a w Androidzie — materiałowy okrągły wskaźnik postępu.

import { ActivityIndicator, View } from 'react-native';

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <ActivityIndicator size="large" color="#4f46e5" />
</View>

SafeAreaView

SafeAreaView automatycznie dodaje odstępy uwzględniające wcięcia urządzenia, paski stanu i wskaźniki ekranu głównego w systemach iOS i Android.

import { SafeAreaView } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <MyScreen />
    </SafeAreaView>
  );
}

Modal

Modal renderuje nakładkę nad aplikacją. Właściwość visible określa, czy nakładka jest wyświetlana.

import { Modal, View, Text } from 'react-native';

<Modal visible={showModal} animationType="slide" transparent={true}>
  <View style={styles.overlay}>
    <View style={styles.dialog}>
      <Text>Are you sure?</Text>
    </View>
  </View>
</Modal>

Szybki test

Jakiego komponentu React Native należy użyć, aby wyświetlić dowolny tekst na ekranie?

Podsumowanie

React Native odwzorowuje koncepcje znane z aplikacji internetowych na natywne komponenty: View (div), Text (p), Image (img), ScrollView, FlatList (lista wirtualizowana), TextInput (input) oraz TouchableOpacity (button). W układzie głównym zawsze należy używać SafeAreaView.

Często zadawane pytania

Czy lekcja „Podstawowe komponenty React Native a DOM w przeglądarce” jest bezpłatna?

Tak — pełny tekst „Podstawowe komponenty React Native a DOM w przeglądarce” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Podstawowe komponenty React Native a DOM w przeglądarce”?

Mapowanie View/Text/Image/ScrollView na ich odpowiedniki w DOM oraz poznanie modelu bridge. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Podstawowe komponenty React Native a DOM w przeglądarce”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawowe komponenty React Native a DOM w przeglądarce
  2. Stylowanie za pomocą API StyleSheet i Flexbox
  3. Nawigacja z Expo Router
  4. Dostęp do API urządzenia: aparat, lokalizacja i powiadomienia push
← Powrót do React Academy