Технологии

🚀 Как настроить .env для приложения на React Native

By Dwinner ||

5 минут ||

16 Сентября, 2024

Управление переменными окружения критически важно для настройки конфигураций вашего приложения на React Native. Это помогает держать чувствительные данные и параметры конфигурации отдельно от основного кода, что особенно полезно при работе с разными средами, такими как разработка, тестирование и продакшн. В этом руководстве мы рассмотрим, как настроить переменные окружения с помощью двух популярных методов: @env с конфигурацией Babel и react-native-config. Мы сосредоточимся на одной переменной — APP_SECRET_KEY, чтобы упростить задачу.

Вариант 1: Использование @env с конфигурацией Babel 🛠️

Другой способ управления переменными окружения в React Native — это использование плагина @env с Babel. Этот метод предлагает простой и ясный подход к настройке.

1. Установка babel-plugin-dotenv-import 📦

Установите плагин Babel для импорта переменных окружения:

npm install babel-plugin-dotenv-import --save-dev

или через Yarn:

yarn add babel-plugin-dotenv-import --dev

2. Создание файлов .env 🗂️

Создайте файл .env в корневой директории вашего проекта и добавьте переменную APP_SECRET_KEY:

APP_SECRET_KEY=your_secret_key_here

3. Настройка Babel 🔧

Откройте файл babel.config.js и настройте его для использования плагина dotenv-import. Ваш babel.config.js должен выглядеть следующим образом:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['dotenv-import', {
      moduleName: '@env',
      path: '.env',
    }],
  ],
};

4. Использование переменных окружения в вашем приложении 🔍

Импортируйте переменную APP_SECRET_KEY с помощью @env в ваших компонентах:

import { APP_SECRET_KEY } from '@env';

console.log(`Secret Key: ${APP_SECRET_KEY}`);

Вариант 2: Использование react-native-config ⚙️

react-native-config — это популярная библиотека, которая упрощает управление переменными окружения в приложениях на React Native. Она позволяет легко определять и использовать параметры конфигурации для разных сред.

1. Установка react-native-config 📥

Первым делом нужно установить библиотеку. Откройте терминал и выполните команду:

npm install react-native-config

или через Yarn:

yarn add react-native-config

2. Связывание react-native-config 🔗

Если вы используете React Native версии 0.60 и выше, библиотека будет связана автоматически. Для более старых версий может потребоваться ручное связывание:

npx react-native link react-native-config

3. Создание файлов .env 🗂️

Создайте файл .env в корневой директории вашего проекта. Также можно создать файлы для различных сред, такие как .env.development, .env.staging, и .env.production.

Добавьте переменную APP_SECRET_KEY в ваш файл .env:

APP_SECRET_KEY=your_secret_key_here

4. Настройка платформ Android и iOS 🛠️

Для Android:

Откройте файл android/app/build.gradle и добавьте следующую строку в начало файла:

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Для iOS:

Откройте файл ios/Podfile и добавьте следующую строку:

pod 'react-native-config', :path => '../node_modules/react-native-config'

Затем перейдите в директорию ios и выполните:

cd ios && pod install

5. Использование переменных окружения в вашем приложении 🔍

Чтобы получить доступ к переменной APP_SECRET_KEY в коде, импортируйте Config из react-native-config:

import Config from 'react-native-config';

const secretKey = Config.APP_SECRET_KEY;
console.log(`Secret Key: ${secretKey}`);

Заключение 🎉

Настройка переменных окружения в приложении на React Native может быть выполнена с помощью @env с конфигурацией Babel или react-native-config. Оба метода эффективны, и ваш выбор зависит от требований вашего проекта и предпочтений.

Теги:

react-native

environments

env

Избранный пост

🚀 Обзор React Native 0.74: Новая Архитектура без ...

React Native продолжает активно развиваться, и версия 0.74 принесла несколько значительных изменений, которые улучшают производительность и удобство работы с фреймворком. Одним из главных нововведений...

7 Февраля, 2025

10 минут

Недавний пост

Пошаговое руководство по настройке push-уведомлени...

1. Создание нового проекта React Native (если не создано ранее)

21 Июня, 2024

10 минут

Понимание потоков в React Native: JavaScript, Shad...

React Native создан, чтобы обеспечить бесперебойную работу приложений,...

30 Августа, 2024

5 минут

Улучшение производительности React Native с помощь...

React Native

4 Сентября, 2024

3 минут

🚀 Как настроить .env для приложения на React Nati...

Управление переменными окружения критически важно для настройки конфиг...

16 Сентября, 2024

5 минут

Новые возможности React 19

🔧 Компилятор React: Предстоящий компилятор React, уже используемый In...

3 Ноября, 2024

10 минут

Стоимость разработки мобильных приложений в 2024 г...

Цена разработки мобильного приложения может варьироваться в зависимост...

26 Января, 2025

10 минут

🚀 Обзор React Native 0.74: Новая Архитектура без ...

React Native продолжает активно развиваться, и версия 0.74 принесла не...