Приложение-калькулятор — это простое приложение, которое всегда доступно на всех устройствах, таких как Android, iOS и настольные компьютеры. В этой статье мы создадим приложение-калькулятор с использованием React Native и Expo. Почему мы используем React Native и Expo?

React Native — это фреймворк на основе JavaScript, который используется для разработки мобильных приложений одновременно в двух операционных системах, а именно Android и iOS. Сам React Native был впервые запущен Facebook в 2015 году и имеет открытый исходный код.

Вы можете узнать больше информации о React Native здесь

Сама Expo представляет собой набор инструментов, библиотек и сервисов, которые используются для упрощения кода приложений React Native. Таким образом, вы можете запускать приложения React Native на эмуляторе Expo.

Подробнее об ЭКСПО можно узнать здесь.

может быть, хватит о внедрении React Native и Expo. Прежде чем мы начнем создавать приложение-калькулятор, сначала установите на свой компьютер node js, react native и expo.

Предпосылка

  1. Установите node js, вы можете посмотреть, как его установить здесь
  2. React Native, документацию по установке можно посмотреть здесь
  3. Expo, документацию по установке можно посмотреть здесь

Шаг 1: Создайте новый проект

Первый шаг — создать новый проект с помощью интерфейса командной строки Expo для создания базы кода React Native с помощью следующей команды:

$ expo init calculator-app

затем нам будет предоставлен выбор запуска проекта, который мы хотим, здесь мы выбираем пустую опцию и используем Javascript, как показано ниже:

после этого процесс продолжится путем загрузки всех зависимостей.

Шаг 2: Создайте компонент кнопки

В процессе разработки приложений с использованием React Native важно обращать внимание на разбиение компонентов пользовательского интерфейса на небольшие компоненты, чтобы код компонента, который мы создаем, можно было использовать повторно. Сначала создайте новую папку с именем «components» для хранения кода нашего компонента. Первый компонент, который мы создадим, — это Button, создайте новый файл с именем Button.js. Вот исходный код компонента Button:

объяснение :

  • в строке 3 есть четыре реквизита, которые нам нужны для создания компонента Button, а именно: onPress, текст, размер и тема.
  • каждый из реквизитов имеет функцию, такую ​​​​как onPress, для обработки действий на кнопках.
  • Созданный нами компонент кнопки имеет 2 типа тем, а именно второстепенную и акцентную, и 1 размер, а именно двойной.
  • компонент кнопки использует компонент React Native по умолчанию, TouchableOpacity

после того, как мы сделаем код из компонента, не забудьте сделать код стиля из этого компонента кнопки. Вот код для стиля кнопки компонента:

поэтому полный код нашего компонента кнопки выглядит следующим образом:

Шаг 3: Создайте компонент строки

Компонент, который мы создадим, — это компонент Row, этот компонент полезен для создания строк, когда мы хотим обрабатывать макеты. Вот код компонента Row и код его стиля:

объяснение:

  • в компоненте row есть 1 реквизит, который нам нужен, а именно: children
  • компонент строки использует компонент View по умолчанию из React Native
  • добавлен flexDirection: «row» в этом стиле используется для создания строки макета

Шаг 4: Создайте логику калькулятора

Создайте новую папку с именем util и новый файл calculator.js, здесь мы создадим логику функции в приложении-калькуляторе, которую позже реализуем в файле App.js. , вот полный код:

объяснение :

  • InitialState используется для присвоения значения по умолчанию нашему приложению-калькулятору.
  • Функция handleNumber служит для возврата значения калькулятора и имеет 2 реквизита, а именно значение и состояние.
  • Функция handle Equal служит для обработки заданного значения каждого математического оператора и возвращает его значение.
  • Калькулятор функций служит для проверки каждого заданного оператора, например, если число вызовет функцию handleNumber, если ясно, что оно вернет значение состояния по умолчанию из initiaState и т. д.

Шаг 5: Рефакторинг App.js

После того, как мы создали все компоненты и логический процесс, следующим шагом будет внесение корректировок в код в файле App.js. Вот полный код:

объяснение:

  • handleTap — это созданная нами функция, которая предназначена для предоставления значений состояния и вызова utils/calculator.
  • здесь мы вызываем два компонента, а именно Button и Row, для разработки внешнего вида калькулятора, такого как числа, математические операции и процесс вычислений.

Шаг 6: Запуск приложения

На этом этапе мы попробуем запустить приложение-калькулятор на устройстве или можем использовать эмулятор, здесь я использую симулятор iPhone из MacOS. Запустите команду ниже, чтобы запустить программу:

$ yarn ios

Выполняемый здесь процесс использует Expo, как показано ниже:

если процесс компиляции завершен, то отображение запрограммированного нами ранее приложения-калькулятора будет таким:

Заключение

Для этой статьи достаточно, пока вы уже знаете о стилях, компонентах, свойствах и состояниях в React Native. Если вам нужен полный исходный код, вы можете посетить мой репозиторий Github здесь https://github.com/bangadam/calculator-app

Спасибо за прочтение!

Доступен для нового проекта! Давайте поговорим :
Электронная почта: [email protected]
Linkedin: https://www.linkedin.com/in/bangadam