React Native — это фреймворк, который позволяет создавать собственные мобильные приложения с использованием JavaScript и React. В этой статье мы узнаем, как создать простое приложение React Native с одним экраном, содержащим секундомер и таймер. Мы не будем использовать Expo, платформу, предоставляющую множество полезных функций для разработки React Native, а воспользуемся интерфейсом командной строки React Native для создания и запуска нашего проекта.
Чтобы следовать этому руководству, на вашем компьютере должны быть установлены Node.js, npm и React Native CLI. Вам также потребуется установить Android Studio или Xcode для запуска приложения на эмуляторе или устройстве. Инструкции по настройке среды вы можете найти здесь.
Создание проекта
Чтобы создать новый проект React Native, откройте терминал и выполните следующую команду:
npx react-native init StopwatchTimerApp
Это создаст папку с именем StopwatchTimerApp с необходимыми файлами и зависимостями для нашего приложения. Вы можете перейти к этой папке с помощью cd StopwatchTimerApp, а затем запустить npx react-native run-android или npx react-native run-ios, чтобы запустить приложение на своем эмуляторе или устройстве.
Вы должны увидеть такой экран:
![Экран React Native по умолчанию]
Установка зависимостей
Для реализации функционала секундомера и таймера мы будем использовать стороннюю библиотеку react-native-stopwatch-timer. Эта библиотека предоставляет два компонента, Stopwatch и Timer, которые мы можем легко настроить и использовать в нашем приложении.
Чтобы установить эту библиотеку, выполните следующую команду в своем терминале:
npm install react-native-stopwatch-timer
Создание пользовательского интерфейса
Теперь, когда мы установили библиотеку, мы можем приступить к созданию пользовательского интерфейса для нашего приложения. Откройте файл App.js в редакторе кода и замените его содержимое следующим кодом:
// App.js
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Stopwatch, Timer…
