Как создать приложение с помощью Gatsby Expo и React Native

Введение

В этом уроке мы увидим, как настроить приложение Universal Expo и использовать Gatsby для таргетинга в Интернете.

Gatsby — это современная платформа веб-сайтов с открытым исходным кодом, которая обеспечивает производительность каждого сайта за счет использования новейших веб-технологий, таких как React и GraphQL.

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

С помощью Gatsby вы также можете выполнить предварительный рендеринг веб-части приложения.

В этом уроке мы увидим:

• Как создать универсальное приложение для Интернета, Android и iOS.
• Как собрать сборку для Android и iOS.
• Как создать веб-проект.

Как создать универсальное приложение для Android и iOS Web

Давайте посмотрим, как создать простое приложение с помощью Gatsby, React и Expo, выполнив несколько простых шагов.

Установите или обновите интерфейс командной строки Expo expo-cli:

npm i -g expo-cli

Создайте новый выставочный проект:

expo init

Установите плагин Gatsby с помощью команды yarn или npm:

yarn add gatsby gatsby-plugin-react-native-web

npm install --save gatsby gatsby-plugin-react-native-web

Создайте файл с именем gatsby-config.js во вновь созданном проекте:

 module.exports = {
 plugins: [
 `gatsby-plugin-react-native-web`,
 /*... */],
 }

Откройте файл .gitignore в проекте и добавьте следующие каталоги в конец файла:

# Gatsby
 /.cache
 /public

Теперь создайте следующий каталог в вашем проекте Gatsby с помощью команды mkdir:

mkdir -p src/pages

Создайте первую страницу вашего проекта, выполнив эту команду:

cp App.js src/pages/index.js

Теперь вы можете запустить приложение и протестировать его:

yarn gatsby develop

Откройте браузер и подключитесь к своему IP-адресу: http://INDIRIZZO_IP:8000/, чтобы увидеть свой проект.

Вы должны увидеть экран, подобный следующему:

Чтобы открыть веб-интерфейс Expo, введите следующую команду:

expo start

Создание сборки для Android и iOS

Мы увидели, как создать простой универсальный пример приложения. Теперь давайте рассмотрим несколько простых шагов, как создать сборку для Android и iOS с настройками по умолчанию.

Перейдите к только что созданной папке проекта и откройте файл app.json.

Добавьте следующие строки кода для Android и iOS:

...
 "ios": {
 "bundleIdentifier": "com.yourcompany.yourappname",
 "buildNumber": "1.0.0"
 },
 "android": {
 "package": "com.yourcompany.yourappname",
 "versionCode": 1
 }...

Таким образом, окончательный результат нашего файла app.json будет следующим:

{
 "expo": {
 "name": "new-gatsby-app",
 "slug": "new-gatsby-app",
 "platforms": [
 "ios",
 "android",
 "web"
 ],
 "version": "1.0.0",
 "orientation": "portrait",
 "icon": "./assets/icon.png",
 "splash": {
 "image": "./assets/splash.png",
 "resizeMode": "contain",
 "backgroundColor": "#ffffff"
 },
 "updates": {
 "fallbackToCacheTimeout": 0
 },
 "assetBundlePatterns": [
 "**/*"
 ],
 "ios": {
 "supportsTablet": true
 },
 "android": {
 "package": "com.yourcompany.yourappname",
 "versionCode": 1
 }
 }
 }

Чтобы создать сборку для Android, введите в терминале следующую команду:

expo build:android

Чтобы создать сборку для iOS, введите в терминале следующую команду:

expo build:ios

Исправление проблем

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

• Установите React Native для Интернета: yarn add react-native-web.
• Установите предустановку babel для React Native web с помощью yarn или npm:

yarn add --dev babel-preset-expo

npm install --save-dev babel-preset-expo

• Создайте babel.config.js и используйте представление Babel:

module.exports = function(api) {
 api.cache(true);
 return {
 presets: ['babel-preset-expo'],
 };
 };

Как создать веб-проект

Давайте посмотрим, как создать проект с Gatsby и Expo только для Интернета.

Убедитесь, что у вас установлен gatsby-cli:

npm install -g gatsby-cli

Создайте новый проект Gatsby с помощью следующей команды:

gatsby new gatsby-site

Установите gatsby-plugin-react-native-web с помощью yarn (рекомендуется) или npm:

yarn add react-native-web gatsby-plugin-react-native-web

npm install --save react-native-web gatsby-plugin-react-native-web

Откройте файл gatsby-config.js и добавьте следующую строку gatsby-plugin-react.native-web в plugins:[..]:

module.exports = {
 plugins: [
 `gatsby-plugin-react-native-web`,
 /*... */],
 };

Сохраните и закройте файл.

Установите предустановку babel с помощью yarn (рекомендуется) или npm::

yarn add -D babel-preset-expo

npm install --save-dev babel-preset-expo

Создайте файл babel.config.js и добавьте следующие строки кода:

module.exports = {
 presets: ['babel-preset-expo'],
 };

Сохраните и закройте файл.

Откройте файл .gitignore и добавьте /.expo и /web-build в конец файла следующим образом:

/.expo
 /web-build

Теперь вы можете запустить проект с помощью следующей команды:

yarn gatsby develop

(Необязательно) Вы можете установить другие модули Expo:

• Основные пакеты: yarn add expo
• Жест: yarn add react-native-gesture-handler
• Крючки: yarn add react-native-web-hooks

Структура файла

Вот рекомендуемая файловая структура для проекта Expo с поддержкой Gatsby:

Expo Gatsby
 ├── src
 │ └── pages -> Routes
 │ └── index.tsx -> Entry Point for Gatsby
 ├──.cache -> Generated Gatsby files (should be ignored)
 ├── public -> Generated Gatsby files (should be ignored)
 ├── assets -> All static assets for your project
 ├── App.tsx -> Entry Point for Mobile apps
 ├── app.json -> Expo config file
 ├── gatsby-config.js -> Gatsby config file
 └── babel.config.js -> Babel config (should be using `babel-preset-expo`)

Вывод

Для получения самого актуального руководства вам необходимо обратиться к примеру в репозитории Expo Github: Gatsby.

Другие учебные пособия, связанные с Expo, см. в следующем разделе: