Типы компонентов в React Native — View, Text, Image, ScrollView, их отличие от HTML

Основные компоненты и их отличия от HTML

Компоненты — это строительные блоки любого React Native-приложения. Это как кирпичи для дома: нужно понять, как их использовать, чтобы строить интерфейсы. Но если в вебе вы привыкли использовать div, span, img или p, то в React Native всё работает иначе. Здесь нет DOM-элементов — вместо этого используются специальные компоненты, которые маппятся (сопоставляются) на родные элементы платформы Android или iOS.

Давайте пройдемся по ключевым компонентам React Native и посмотрим, как они работают.

View — аналог div

View — это базовый контейнер в React Native. Аналогично div в HTML, он используется для оборачивания других элементов и создания структуры пользовательского интерфейса.

Пример:

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

const ExampleView = () => {
  return (
    <View style={styles.container}>
      <Text>Привет, View!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#eaeaea',
    padding: 16,
    borderRadius: 8,
  },
});

export default ExampleView;

Что здесь происходит:

• View в React Native заменяет div, но у него нет таких понятий, как марджины, паддинги, ширина и высота "по умолчанию". Всё задаётся через стили.
• Стилизация происходит через объект StyleSheet, который напоминает работу с inline-стилями в React, но немного упрощена.

Text — аналог span или p

Text используется для отображения текста. Если в вебе вы могли писать текст прямо в div, то в React Native текст всегда должен быть внутри компонента Text.

Пример:

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

const ExampleText = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Заголовок</Text>
    <Text style={styles.content}>Вот пример текста, который отображается внутри компонента Text.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  content: {
    fontSize: 16,
    color: '#555',
  },
});

export default ExampleText;

Особенности:

• В отличие от HTML, текст нельзя вставлять в View или другие компоненты. Всегда используйте Text.
• Стилизация текста, такая как fontSize, color, fontWeight, и другое, задаётся через стили.

Image — аналог img

Для отображения изображений в React Native используется компонент Image. Вы можете загружать как локальные изображения (из папки проекта), так и удалённые по URL.

Пример локального изображения:

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

const ExampleImage = () => {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/example.png')} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginTop: 16,
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100,
  },
});

export default ExampleImage;

Пример загрузки изображения по URL:

<Image source={{ uri: 'https://example.com/image.png' }} style={{ width: 100, height: 100 }} />

Особенности:

• source — это обязательное свойство, которое указывает, откуда брать изображение.
• Все размеры (ширина, высота) для изображений должны быть указаны явно. Если вы их пропустите, изображение не отобразится.

ScrollView — прокручиваемые области

ScrollView предоставляет возможность создавать прокручиваемые области. Это полезно, если контент не умещается на экране.

Пример:

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

const ExampleScrollView = () => {
  return (
    <ScrollView style={styles.scroll}>
      {Array.from({ length: 20 }, (_, i) => (
        <Text key={i} style={styles.text}>
          Элемент {i + 1}
        </Text>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scroll: {
    padding: 16,
    backgroundColor: '#f9f9f9',
  },
  text: {
    fontSize: 18,
    marginBottom: 8,
  },
});

export default ExampleScrollView;

Особенности:

• В отличие от веба, где слово "прокрутка" ассоциируется с тегом overflow, здесь для этого нужен специальный компонент ScrollView.
• Используйте ScrollView для относительно небольших списков. Для больших наборов данных лучше использовать FlatList (мы разберём его позднее).

Сравнение с HTML

Практический пример: упражнение с базовыми компонентами

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

import React from 'react';
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';

export const BasicComponentsScreen = () => {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>Привет, React Native!</Text>
      <Image
              source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.image}
      />
      <Text style={styles.content}>
        React Native позволяет создавать нативные мобильные приложения с использованием JavaScript и React.
        Он использует нативные компоненты под капотом, что обеспечивает высокую производительность.
        С ним можно разрабатывать приложения под Android и iOS одновременно.
      </Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  image: {
    width: 100,
    height: 100,
    marginBottom: 16,
  },
  content: {
    fontSize: 16,
    textAlign: 'center',
  },
});

export default BasicComponentsScreen;

Типичные ошибки:

1. Текст вне Text: если вы попробуете вставить текст в View (не оборачивая его в Text), приложение просто упадёт. Всегда оборачивайте текст в Text.
2. Отсутствие размеров у Image: если не указать width и height, изображение не отобразится. Размеры — это обязательное требование для Image.
3. Большие списки с ScrollView: использование ScrollView для больших данных может привести к проблемам с производительностью. Это место для FlatList или VirtualizedList.

2

Задача

Модуль 3: React, 21 уровень, 4 лекция

Недоступна

Изображение с текстовым описанием

Изображение с текстовым описанием

Открыть

3

Опрос

Введение в React Native, 21 уровень, 4 лекция

Недоступен

Введение в React Native

Введение в React Native

Открыть