0Pricing
React Academy · Урок

Основные компоненты React Native и веб-DOM

Сопоставьте View, Text, Image и ScrollView с соответствующими элементами DOM и разберитесь в модели моста.

«Основные компоненты React Native и веб-DOM» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Почему в React Native нет HTML

React Native отображает нативные компоненты пользовательского интерфейса iOS и Android, а не элементы браузерного DOM. Здесь нет <div>, <p> или <img> — у каждой платформы есть собственные нативные примитивы.

View — аналог div

View — самый базовый контейнер компоновки в React Native. На iOS он соответствует UIView, а на Android — android.view.View. Представляйте его как <div>, который не может напрямую содержать текст.

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 — аналог p/span

Text необходим для любого видимого текста. В отличие от веба, нельзя помещать строку непосредственно внутрь View — её необходимо обернуть в <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 — аналог img

Image отображает изображения. Используйте свойство source с вызовом require() для локальных ресурсов или объектом { uri: '...' } для изображений из сети.

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 — аналог overflow:scroll

ScrollView — прокручиваемый контейнер. В отличие от веба, его необходимо использовать явно: View не поддерживает прокрутку. Для длинных списков предпочитайте FlatList.

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

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

FlatList — виртуализированный список

FlatList отображает только видимые элементы, повторно используя элементы за пределами экрана, что необходимо для высокой производительности при работе с большими наборами данных.

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 — аналог кнопки

TouchableOpacity (а в новых версиях RN — Pressable) добавляет отклик на касание к любому представлению. Свойство onPress обрабатывает нажатия.

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

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

TextInput — аналог input

TextInput — управляемое поле ввода. Оно поддерживает value, onChangeText, placeholder и типы клавиатуры.

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

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

ActivityIndicator — индикатор загрузки

ActivityIndicator — нативный индикатор загрузки. На iOS это круговой индикатор, а на Android — круговой индикатор выполнения в стиле Material.

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

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

SafeAreaView

SafeAreaView автоматически добавляет отступы для вырезов экрана, строк состояния и индикаторов главного экрана на iOS и Android.

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

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

Modal

Modal отображает поверх приложения наложенный слой. Свойство visible управляет его отображением.

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>

Быстрая проверка

Какой компонент React Native необходимо использовать для отображения любого текста на экране?

Итоги

React Native сопоставляет веб-концепции с нативными компонентами: View (div), Text (p), Image (img), ScrollView, FlatList (виртуализированный список), TextInput (input) и TouchableOpacity (button). Для корневой компоновки всегда используйте SafeAreaView.

Часто задаваемые вопросы

Урок «Основные компоненты React Native и веб-DOM» бесплатный?

Да — полный текст урока «Основные компоненты React Native и веб-DOM» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Основные компоненты React Native и веб-DOM»?

Сопоставьте View, Text, Image и ScrollView с соответствующими элементами DOM и разберитесь в модели моста. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Основные компоненты React Native и веб-DOM»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Основные компоненты React Native и веб-DOM
  2. Стилизация с API StyleSheet и Flexbox
  3. Навигация с Expo Router
  4. Доступ к API устройства: камера, местоположение и push-уведомления
← Назад к React Academy