React Native TypeScript Boilerplate ( 2022 )

React Native TypeScript Boilerplate 2022 — В интернете можно найти много информации о том, как разработчики делятся шаблонами для облегчения создания приложений React Native. Некоторые используют репозиторий шаблонов CLI, а некоторые — в виде библиотеки npm. Это не имеет значения. Здесь я расскажу о типах шаблонов react native. Довольно редко React Native базируется на типскрипте, и я вижу, что довольно многим нужен этот типскриптовый React Native.

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

Лучший шаблон для React Native на основе TypeScript

TypeScript — это язык программирования на основе JavaScript, который добавляет функции сильной типизации и имеет классические концепции программирования ООП. Он облегчает разработчикам создание довольно сложных приложений. Иногда люди говорят, что typescript раздражает, потому что нам приходится проверять и указывать типы всех переменных и функций, которые мы создали.

Но в самом typescript есть свои преимущества. В каждую переменную или функцию, которую мы создаем, мы должны добавить тип или интерфейс, который, вкратце, представляет переменные/параметры, которые мы создаем на основе их типа. Он основан на строгих правилах, поэтому если вы объявили тип и добавили другое значение или параметр к типу, который вы ранее создали, typescript скажет вам, что вы ошиблись, и выдаст ошибку.

React Native Typescript boilerplate с Redux

Это полезно для того, чтобы в будущем это не стало ошибкой. Вот такой вот взгляд на typescript. Возвращаясь к React Native Boilerplate, я только что сделал React Native Boilerplate на основе typescript, и, как и предыдущий Boilerplate, этот является очень базовым, что необходимо для создания React Native Boilerplate. Так что в будущем, если вы создадите свое приложение с нуля и будете использовать этот typescript boilerplate, вы сможете добавить необходимые вам библиотеки.

Контрольный список для React-Native Boilerplate TypeScript

Здесь я рассмотрю его еще раз. Что вам нужно, чтобы сделать react native boilerplate?

  • Навигация: Служит для навигации между экранами. Наиболее популярным является react-navigation.
  • Управление состояниями: здесь популярен инструментарий redux. Вы также можете использовать MOBX или Zustand.
  • React hooks: React предоставляет react hooks, которые упрощают управление жизненным циклом. Для дополнительных хуков в fetch API есть react-query, который вы также можете использовать.
  • Иконка React Native: Иконка — это важная вещь при создании приложения. Без иконки приложение будет казаться пустой газетой. Поэтому я рекомендую использовать векторную иконку react native, или вы можете также использовать свою локальную иконку.

К счастью, React Native Boilerplate, которым я поделюсь с вами, уже покрывает основы, необходимые для создания приложения React Native. Версии всех библиотек актуальны, поэтому вам не нужно беспокоиться.

Установка и как использовать React Native Typescript boilerplate

Для текущей версии этого TypeScript boilerplate (v0.0.12), убедитесь, что версия вашего cocoapods >= 1.11.2, а также версия ruby = 2.7.5.

На первом этапе просто выполните приведенный ниже код:

npx react-native init MyAppName --template @handidev/react-native-typescript-boilerplate

В качестве примечания, замените слово MyAppName на имя приложения, которое вы хотите.

Далее, после того как все прошло успешно, следующим шагом будет запуск приложения React Native на выбранной вами платформе.
Для версии iOS запустите:

yarn ios
Войти в полноэкранный режим Выйти из полноэкранного режима

Для версии Android запустите:

yarn android
Войти в полноэкранный режим Выйти из полноэкранного режима

Да, это так просто. Если у вас возникнут проблемы с установкой, не стесняйтесь обращаться ко мне на Github.

Ссылка на библиотеку react-native-typescript-boilerplate NPM: https://www.npmjs.com/package/@handidev/react-native-typescript-boilerplate

Ссылка на репозиторий react-native typescript boilerplate GitHub: https://github.com/handi-dev/react-native-typescript-boilerplate

источник: React Native TypeScript Boilerplate 2022

Оцените статью
devanswers.ru
Добавить комментарий