Мобильная разработка
Курс по React Native 2025: Встроенные и кастомные компоненты #3
Toni_Dev
Иконка календаря 18.01.2025
Иконка чата 0
Иконка глаза 22
 

Когда дело доходит до разработки мобильных приложений, интерфейс — это то, что видит и чувствует пользователь. В React Native работа с пользовательским интерфейсом (UI) построена вокруг компонентов, которые можно комбинировать и стилизовать под любые задачи. В этой статье мы разберём, как работать с встроенными компонентами React Native, как создавать кастомные UI-элементы, а также дадим советы для создания красивого и удобного интерфейса.

Что такое UI-компоненты в React Native?

В React Native всё строится вокруг компонентов. Компонент — это строительный блок, из которого создаётся интерфейс. Он может быть простым, как текст или кнопка, или сложным, как целая форма или карточка товара.

Типы компонентов:

Встроенные компоненты

Это компоненты, которые идут «из коробки» с React Native. Примеры:

  • View — контейнер для других компонентов, используется для размещения элементов на экране.
  • Text — компонент для отображения текста на экране.
  • Image — компонент для отображения изображений.
  • TextInput — поле для ввода текста.
  • Button — кнопка, используемая для выполнения действий, таких как отправка формы.
  • ScrollView — компонент, позволяющий прокручивать содержимое, которое не помещается на экран.
  • FlatList — компонент для рендеринга длинных списков с оптимизацией для больших объемов данных.
  • SectionList — компонент для отображения списков с разделами, где каждый раздел может иметь заголовок.
  • ActivityIndicator — индикатор загрузки, отображающий вращающийся круг или полоску при ожидании.
  • Modal — компонент для создания модальных окон, отображаемых поверх контента.

Кастомные компоненты

Это ваши собственные компоненты, которые вы создаёте, комбинируя встроенные. Например, можно создать карточку товара, которая будет включать текст, изображение и кнопку.

Работа со встроенными компонентами

Давайте разберём ключевые встроенные компоненты и то, как их использовать.

View

View — это базовый контейнер для других компонентов. Можно думать о нём как о «коробке», в которой находятся другие элементы.

Пример:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default App;

Text

Для отображения текста используется Text. Он поддерживает стилизацию, включая шрифты, размеры и выравнивание.

Пример:

<Text style={{ fontSize: 24, color: 'black' }}>
  Привет, React Native!
</Text>

Image

Картинки добавляются через компонент Image. Он может загружать изображения как из локальных файлов, так и по URL.

Пример:

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

TextInput

TextInput используется для ввода текста. Вы можете добавлять обработчики, такие как onChangeText.

Пример:

<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  placeholder="Введите текст"
/>

Button

Для простых кнопок используйте Button. Если вам нужна кастомная кнопка — создайте её сами (об этом чуть позже).

Пример:

<Button
  title="Нажми на меня"
  onPress={() => alert('Кнопка нажата!')}
/>

ScrollView

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

Пример:

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

const LongContent = () => {
  return (
    <ScrollView>
      <Text>Длинный текст, который нужно прокручивать...</Text>
      {/* Добавьте больше текста для демонстрации прокрутки */}
    </ScrollView>
  );
};

FlatList

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

Пример:

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

const data = ['Элемент 1', 'Элемент 2', 'Элемент 3'];

const MyList = () => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

SectionList

Подобно FlatList, но используется для отображения разделённых списков, где каждый раздел может иметь заголовок. Это полезно, когда данные группируются в категории.

Пример:

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

const sections = [
  { title: 'Раздел 1', data: ['Элемент 1', 'Элемент 2'] },
  { title: 'Раздел 2', data: ['Элемент 3', 'Элемент 4'] },
];

const MySectionList = () => {
  return (
    <SectionList
      sections={sections}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

ActivityIndicator

Компонент, отображающий индикатор загрузки, который используется для информирования пользователя о процессе ожидания.

Пример:

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

const LoadingIndicator = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setLoading(false), 3000); // Симуляция загрузки
  }, []);

  return (
    <View>
      {loading ? <ActivityIndicator size="large" color="#0000ff" /> : <Text>Загрузка завершена!</Text>}
    </View>
  );
};

Modal

Компонент для создания модальных окон (всплывающих окон), которые показываются поверх содержимого.

Пример:

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

const MyModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>
      <Button title="Открыть модальное окно" onPress={() => setModalVisible(true)} />
      <Modal
        visible={modalVisible}
        animationType="slide"
        onRequestClose={() => setModalVisible(false)}
      >
        <View>
          <Text>Это модальное окно!</Text>
          <Button title="Закрыть" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>
    </View>
  );
};

Создание кастомных компонентов

Когда встроенных компонентов недостаточно, самое время создавать свои.

Пример: карточка товара

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

const ProductCard = ({ image, title, price }) => {
  return (
    <View style={styles.card}>
      <Image source={{ uri: image }} style={styles.image} />
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.price}>{price} ₽</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: 200,
    borderRadius: 10,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    padding: 10,
    marginBottom: 10,
  },
  image: {
    width: '100%',
    height: 100,
    borderRadius: 10,
    marginBottom: 10,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  price: {
    fontSize: 14,
    color: 'green',
  },
});

export default ProductCard;

Использование:

<ProductCard
  image="https://example.com/product.jpg"
  title="Смартфон"
  price="19999"
/>

Стилизация компонентов

React Native использует StyleSheet для стилизации компонентов. Это похоже на CSS, но с особенностями:

  • Камелкейс вместо дефисов
  • Вместо background-color пишем backgroundColor.
  • Нет единиц измерения. Все размеры указываются в числах (например, width: 100 означает 100 пикселей).

Пример стиля

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    borderRadius: 10,
  },
});

Создание удобного и красивого UI

Используйте готовые библиотеки

  • React Native Elements: компоненты для UI, такие как кнопки, карточки и аватары.
  • React Native Paper: мощные компоненты в стиле Material Design.
  • NativeBase: кроссплатформенные UI-компоненты.

Думайте о мобильных пользователях

Интерфейс должен быть:

  • Интуитивным.
  • Простым.
  • Оптимизированным для сенсорного ввода.

Следите за производительностью

Используйте FlatList или SectionList для больших списков вместо обычного ScrollView.

Практика: простое приложение «Список пользователей»

Давайте создадим приложение, где мы покажем список пользователей.

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

// Массив с данными пользователей
const users = [
  { id: '1', name: 'Иван Иванов' },
  { id: '2', name: 'Мария Петрова' },
  { id: '3', name: 'Сергей Смирнов' },
];

// Компонент для отображения информации о пользователе
const UserItem = ({ name }) => (
  <View style={styles.userItem}>
    <Text style={styles.userName}>{name}</Text>
  </View>
);

const App = () => {
  return (
    <View style={styles.container}>
      {/* Заголовок экрана */}
      <Text style={styles.header}>Список пользователей</Text>
      
      {/* Список пользователей с помощью FlatList */}
      <FlatList 
        data={users} 
        renderItem={({ item }) => <UserItem name={item.name} />} 
        keyExtractor={(item) => item.id} 
      />
    </View>
  );
};

// Стили для компонентов
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  userItem: {
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 10,
  },
  userName: {
    fontSize: 16,
  },
});

export default App;

Этот код создает простое React Native приложение, которое отображает список пользователей.

  • В массиве users хранится информация о пользователях с их ID и именами.
  • Компонент UserItem отображает имя пользователя.
  • В компоненте App используется FlatList для рендеринга списка пользователей. Каждый элемент списка отображается с помощью компонента UserItem.
  • Стили задают внешний вид элементов, таких как контейнер, заголовок и элементы списка.

В итоге, приложение выводит заголовок и список пользователей с их именами.

 

 

Комментарии

0

Без регистрации и смс