Приложение React-Native с использованием Expo CRNA и Typescript

1. Создание проекта React-Native с использованием CRNA EXPO

Установите инструмент EXPO’s Create-React-Native-App (CRNA).

$ yarn global add create-react-native-app

Откройте терминал и перейдите в нужную рабочую папку. Выполните команду ниже, чтобы создать новый проект React-Native:

create-react-native-app CRNAExpoTSExample

С помощью приведенной выше команды CRNA создаст для вас очень простое, но готовое к запуску приложение, поддерживающее реакцию. После создания приложения перейдите в папку проекта созданного приложения и убедитесь, что базовое исходное приложение, созданное с помощью CRNA, работает.

cd CRNAExpoTSExample
yarn start

Откройте приложение на своем мобильном устройстве

Загрузите приложение Expo на свой мобильный телефон (Android или iPhone). Откройте приложение Expo и выберите опцию «Сканировать QR-код». Убедитесь, что ваша машина для разработки и мобильный телефон подключены к одной и той же сети Wi-Fi.

Отсканируйте приведенный выше QR-код в приложении Expo (версия 26.0.0 и выше, Expo больше не поддерживается опция сканирования на iPhone, вы все равно можете сканировать QR-код с камеры iPhone, и вам будет предложено открыть его с помощью приложения Expo). Теперь наше приложение должно открыться на вашем телефоне:

Запуск модульных тестов

Также убедитесь, что скаффолд модульного теста CRNA в папке проекта работает: yarn test

2. Добавление машинописного текста

Установка зависимостей

yarn add typescript tslint -D
yarn add @types/react @types/react-native @types/react-dom -D

Нам также понадобятся rimraf и concurrently для очистки выходной папки от файлов ts-transpiled-to-js и одновременного запуска сценариев npm.

yarn add concurrently rimraf -D

Для написания юнит-тестов jest в машинописном тексте нам понадобится ts-jest. Также мы установим defs типов для рендереров jest и react test.

yarn add ts-jest @types/jest @types/react-test-renderer -D

Настройка

Настройте файл конфигурации Typescript tsconfig.json с помощью команды tsc или просто создайте файл вручную в папке проекта.

tsc --init

(Если команда tsc не работает, например, tsc command not found, проверьте, установлен ли у вас машинописный текст глобально и /node/bin в вашей $PATH var - см. Https://stackoverflow.com/a/37092975 или Https://stackoverflow.com/a/37117612 или https://stackoverflow.com/a/46222888)

tsconfig.json

Откройте проект в редакторе кода и обновите tsconfig.json, как показано ниже.

Обратите внимание на настройки rootDir и outDir (строка № 6-7) выше.

Мы хотели бы, чтобы все файлы кода нашего приложения typescript находились в папках / подпапках в папке src. С “rootDir”: “src компилятор Typescript будет искать все файлы .ts или .tsx в папке src и ее подпапках.

“outDir”: “build” означает, что машинописный текст будет выводить переведенные файлы javascript в папку build.

Также обратите внимание на свойство “exclude” выше (строки 31–36), сюда можно добавить любые файлы или папки js, которые вы хотите, чтобы машинописный текст игнорировал.

Добавьте tslint.json

Добавьте файл tslint.json в папку проекта, скопировав его содержимое отсюда.

Создайте папки `src` и `build`

Поскольку мы настроили src и build как rootDir и outputDir в tsconfig.json, создайте эти папки в корневой папке нашего проекта.

Когда мы создали проект с помощью команды CRNA (create-react-native-app CRNAExpoTSExample), она добавила App.js и App.test.js в нашу папку проекта. Переместите эти файлы в созданную нами папку src, переименуйте App.js и App.test.js в App.tsx и App.test.tsx соответственно. Папка и файлы проекта на этом этапе должны выглядеть примерно так:

Добавьте еще несколько скриптов в package.json

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

...
"scripts": {
   "start": "react-native-scripts start",
   "eject": "react-native-scripts eject",
   "android": "react-native-scripts android",
   "ios": "react-native-scripts ios",
   "test": "node node_modules/jest/bin/jest.js"
}
...

Теперь мы добавим еще несколько скриптов для выполнения наших задач по компиляции машинописного текста, созданию сборки и запуску нашего приложения:

Мы бы добавили вышеуказанные скрипты в наш раздел скриптов package.json. Это объясняется ниже:

Полную версию package.json можно найти здесь.

Добавление App.js в корневую папку проекта

Если вы заметили, что в package.json файле, который был изначально создан CRNA, «основная» точка входа для приложения установлена на:

"main":"./node_modules/react-native-scripts/build/bin/crna-entry.js"

Это означает, что наше приложение запускается с этого файла crna-entry.js. Откройте этот файл, и вы обнаружите, что он ссылается на наш App.js файл:

var _App = require('../../../../App');

Это означает, что ожидается модуль приложения в App.js файле в корневой папке проекта. Однако мы переместили исходный App.js файл в папкуsrc. Также имейте в виду, что компилятор машинописного текста выведет преобразованный файл ts-to-js в папку build.

Итак, чтобы CRNA работала с нашей измененной структурой папок и конфигурацией машинописного текста, давайте добавим файл App.js в папку проекта, который будет просто экспортировать наш компонент приложения в src/App.tsx, который компилятор машинописного текста выведет в папку build.

Создайте App.js файл в корневой папке проекта с кодом ниже:

import App from './build/App';
export default App;

Добавьте App.js в массив `exclude` tsconfig.json

Добавьте созданный выше App.js файл в массив exclude tsconfig.json, чтобы машинописный текст игнорировал этот файл.

3. Запустите приложение.

Теперь мы готовы запустить наше приложение для машинописного текста. Выполните команду:

yarn run buildAndStart

Эта команда запустит buildAndStart скрипт, который мы создали в нашем package.json файле выше, очистит папку build и выведет переведенные файлы машинописного текста в папку build и запустит проект. Как и раньше, вы увидите, что CRNA генерирует QR-код на вашем терминале, который вы можете сканировать из приложения EXPO на вашем Android / iPhone, и увидите, что наше приложение работает на устройстве.

Внесите некоторые изменения в App.tsx, чтобы увидеть, как в реальном времени выполняется перезагрузка, чтобы обновить приложение на вашем устройстве с отображением последних изменений. (Обновление может занять некоторое время в первый раз.)

(Если у вас есть репозиторий git для папки проекта, добавьте /build в .gitignore, так как нам не нужно отправлять файлы сборки в git. Также добавьте “build” в массив exclude tsconfig.json для машинописного текста, чтобы файлы в этой папке игнорировались.

4. Настройте тесты Jest Unit для использования машинописного текста.

Мы установили пакет ts-test, чтобы мы могли писать наши модульные тесты Jest с использованием машинописного текста.

Добавьте новый файл jest.config.js в папку проекта

👆В настройке testRegex выше мы указываем искать любой файл в папке __test__ или любой файл .test или .spec в папке / src /. Мы поместим весь исходный код нашей разработки в папку src, а файл спецификации / теста будет помещен во вложенные папки в src вместе с ресурсом / компонентом.

Добавьте jest.config.ts в массив `exclude` tsconfig.json

Добавьте jest.config.ts в массив exclude tsconfig.json, чтобы машинописный текст игнорировал этот файл.

Настройте ts-jest для обработки синтетического импорта

CRNA использует синтетический импорт по умолчанию в файле компонента приложения, который он создает при формировании проекта. Таким образом, вы увидите, что React импортирован, как показано ниже, в App.tsx

import React from 'react';

Чтобы ts-jest обрабатывал синтетический импорт по умолчанию, убедитесь, что у вас есть следующая конфигурация:

В tsconfig.json убедитесь, что у вас есть "allowSyntheticDefaultImports": true в compilerOptions.
Убедитесь, что у вас установлен трансформатор для обработки перенесенных файлов jsx с помощью bable-test:

module.exports = {    
    "transform": {        
        "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
        "^.+\\.tsx?$": "ts-jest"    
     },
     ....
     ....
}

Запуск модульного теста

Запустите тест и убедитесь, что он работает должным образом: yarn test.

👏 Ура !! Мы настроили машинописный текст для разработки нашего приложения Expo React-Native и модульных тестов.

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

Приложение React-Native с использованием Expo CRNA и Typescript - Часть 1