Mengatur variabel lingkungan di reaksi-asli?

Saya menggunakan reaksi asli untuk membangun aplikasi lintas platform, tetapi saya tidak tahu cara mengatur variabel lingkungan sehingga saya dapat memiliki konstanta yang berbeda untuk lingkungan yang berbeda.

Contoh:

development: 
  BASE_URL: '',
  API_KEY: '',
staging: 
  BASE_URL: '',
  API_KEY: '',
production:
  BASE_URL: '',
  API_KEY: '',

Daripada mengkodekan konstanta aplikasi Anda dan melakukan pergantian pada lingkungan (saya akan menjelaskan bagaimana melakukannya sebentar lagi), saya sarankan menggunakan dua belas faktor saran agar proses pembangunan Anda menentukan Anda BASE_URLdan Anda API_KEY.

Untuk menjawab bagaimana mengekspos lingkungan Anda react-native, saya sarankan menggunakan variabel Babel -plugin-transform-inline-environment-variable .

Agar ini berfungsi, Anda perlu mengunduh plugin dan kemudian Anda harus menyiapkan .babelrcdan harus terlihat seperti ini:

{
  "presets": ["react-native"],
  "plugins": [
    "transform-inline-environment-variables"
  ]
}

Dan jika Anda mengubah kode asli-reaksi Anda dengan menjalankan API_KEY=my-app-id react-native bundle(atau memulai, menjalankan-ios, atau menjalankan-android) maka yang harus Anda lakukan adalah membuat kode Anda terlihat seperti ini:

const apiKey = process.env['API_KEY'];

Dan kemudian Babel akan menggantinya dengan:

const apiKey = 'my-app-id';

Semoga ini membantu!

Solusi paling sederhana (bukan yang terbaik atau ideal ) yang saya temukan adalah menggunakan react-native-dotenv . Anda cukup menambahkan preset "react-native-dotenv" ke .babelrcfile Anda di root proyek seperti:

{
  "presets": ["react-native", "react-native-dotenv"]
}

Buat .envfile dan tambahkan properti:

echo "SOMETHING=anything" > .env

Kemudian di proyek Anda (JS):

import { SOMETHING } from 'react-native-dotenv'
console.log(SOMETHING) // "anything"

Menurut pendapat saya pilihan terbaik adalah menggunakan react-native-config . Ini mendukung 12 faktor .

Saya menemukan paket ini sangat berguna. Anda dapat mengatur beberapa lingkungan, misalnya pengembangan, pementasan, produksi.

Dalam hal Android, variabel tersedia juga di kelas Java, gradle, AndroidManifest.xml dll. Dalam kasus iOS, variabel tersedia juga di kelas Obj-C, Info.plist.

Anda cukup membuat file seperti

• .env.development
• .env.staging
• .env.production

Anda mengisi file-file ini dengan kunci, nilai-nilai suka

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

dan kemudian gunakan saja:

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

Jika Anda ingin menggunakan lingkungan yang berbeda, pada dasarnya Anda menetapkan variabel ENVFILE seperti ini:

ENVFILE=.env.staging react-native run-android

atau untuk merakit aplikasi untuk produksi (android dalam kasus saya):

cd android && ENVFILE=.env.production ./gradlew assembleRelease

Bereaksi asli tidak memiliki konsep variabel global. Ini menegakkan lingkup modular secara ketat, untuk mempromosikan modularitas komponen dan usabilitas ulang.

Namun, kadang-kadang, Anda perlu komponen untuk mengetahui lingkungannya. Dalam hal ini sangat mudah untuk mendefinisikan Environmentmodul yang komponennya dapat dipanggil untuk mendapatkan variabel lingkungan, misalnya:

lingkungan.js

var _Environments = {
    production:  {BASE_URL: '', API_KEY: ''},
    staging:     {BASE_URL: '', API_KEY: ''},
    development: {BASE_URL: '', API_KEY: ''},
}

function getEnvironment() {
    // Insert logic here to get the current platform (e.g. staging, production, etc)
    var platform = getPlatform()

    // ...now return the correct environment
    return _Environments[platform]
}

var Environment = getEnvironment()
module.exports = Environment

my-component.js

var Environment = require('./environment.js')

...somewhere in your code...
var url = Environment.BASE_URL

Ini menciptakan lingkungan tunggal yang dapat diakses dari mana saja di dalam lingkup aplikasi Anda. Anda harus secara eksplisit require(...)modul dari komponen apa pun yang menggunakan variabel Lingkungan, tetapi itu adalah hal yang baik.

Saya menggunakan __DEV__polyfill yang dibangun ke dalam reaksi-asli untuk mengatasi masalah ini. Secara otomatis diatur trueselama Anda tidak membangun reaksi asli untuk produksi.

Misalnya:

//vars.js

let url, publicKey;
if (__DEV__) {
  url = ...
  publicKey = ...
} else {
  url = ...
  publicKey = ...
}

export {url, publicKey}

Maka adil import {url} from '../vars'dan Anda akan selalu mendapatkan yang benar. Sayangnya, ini tidak akan berfungsi jika Anda menginginkan lebih dari dua lingkungan, tetapi mudah dan tidak melibatkan penambahan lebih banyak ketergantungan pada proyek Anda.

Metode spesifik yang digunakan untuk mengatur variabel lingkungan akan bervariasi berdasarkan layanan CI, pendekatan pembangunan, platform dan alat yang Anda gunakan.

Jika Anda menggunakan Buddybuild untuk CI untuk membangun aplikasi dan mengelola variabel lingkungan , dan Anda memerlukan akses ke konfigurasi dari JS, buat env.js.examplekunci dengan (dengan nilai string kosong) untuk check-in ke kontrol sumber, dan gunakan Buddybuild untuk menghasilkan env.jsfile saat membangun di post-clonelangkah, menyembunyikan konten file dari log bangunan, seperti:

#!/usr/bin/env bash

ENVJS_FILE="$BUDDYBUILD_WORKSPACE/env.js"

# Echo what's happening to the build logs
echo Creating environment config file

# Create `env.js` file in project root
touch $ENVJS_FILE

# Write environment config to file, hiding from build logs
tee $ENVJS_FILE > /dev/null <<EOF
module.exports = {
  AUTH0_CLIENT_ID: '$AUTH0_CLIENT_ID',
  AUTH0_DOMAIN: '$AUTH0_DOMAIN'
}
EOF

Tip: Jangan lupa untuk menambahkan env.jsuntuk .gitignorejadi config dan rahasia tidak diperiksa ke kontrol sumber sengaja selama perkembangan.

Anda kemudian dapat mengelola bagaimana file ditulis menggunakan variabel Buddybuild seperti BUDDYBUILD_VARIANTS, misalnya, untuk mendapatkan kontrol yang lebih besar tentang bagaimana konfigurasi Anda dihasilkan pada waktu build.

Saya pikir sesuatu seperti perpustakaan berikut ini dapat membantu Anda memecahkan sedikit puzzle yang hilang, fungsi getPlatform ().

https://github.com/joeferraro/react-native-env

const EnvironmentManager = require('react-native-env');

// read an environment variable from React Native
EnvironmentManager.get('SOME_VARIABLE')
  .then(val => {
    console.log('value of SOME_VARIABLE is: ', val);

  })
  .catch(err => {
    console.error('womp womp: ', err.message);
  });

Satu-satunya masalah yang saya lihat dengan ini, yaitu kode async. Ada permintaan tarik untuk mendukung getSync. Lihat juga.

https://github.com/joeferraro/react-native-env/pull/9

Saya telah membuat skrip pra-bangun untuk masalah yang sama karena saya memerlukan beberapa titik akhir api differents untuk lingkungan differents

const fs = require('fs')

let endPoint

if (process.env.MY_ENV === 'dev') {
  endPoint = 'http://my-api-dev/api/v1'
} else if (process.env.MY_ENV === 'test') {
  endPoint = 'http://127.0.0.1:7001'
} else {
  endPoint = 'http://my-api-pro/api/v1'
}

let template = `
export default {
  API_URL: '${endPoint}',
  DEVICE_FINGERPRINT: Math.random().toString(36).slice(2)
}
`

fs.writeFile('./src/constants/config.js', template, function (err) {
  if (err) {
    return console.log(err)
  }

  console.log('Configuration file has generated')
})

Dan saya telah membuat kebiasaan npm run scriptsuntuk menjalankan menjalankan reaksi-asli ..

Paket-json saya

"scripts": {
    "start-ios": "node config-generator.js && react-native run-ios",
    "build-ios": "node config-generator.js && react-native run-ios --configuration Release",
    "start-android": "node config-generator.js && react-native run-android",
    "build-android": "node config-generator.js && cd android/ && ./gradlew assembleRelease",
    ...
}

Kemudian dalam komponen layanan saya, cukup impor file yang dibuat secara otomatis:

import config from '../constants/config'

fetch(`${config.API_URL}/login`, params)

Langkah 1: Buat komponen terpisah seperti ini Nama komponen: pagebase.js
Langkah 2: Di dalam ini gunakan kode ini

    export const BASE_URL = "http://192.168.10.10:4848/";
    export const API_KEY = 'key_token';

Langkah 3: Gunakan di komponen apa pun, untuk menggunakannya, impor komponen ini terlebih dahulu, lalu gunakan. Impor dan gunakan:

        import * as base from "./pagebase";

        base.BASE_URL
        base.API_KEY

Saya menggunakan babel-plugin-transform-inline-environment-variables.

Apa yang saya lakukan adalah meletakkan file konfigurasi dalam S3 dengan lingkungan saya yang berbeda.

s3://example-bucket/dev-env.sh
s3://example-bucket/prod-env.sh
s3://example-bucket/stage-env.sh

SETIAP file env:

FIRSTENV=FIRSTVALUE
SECONDENV=SECONDVALUE

Setelah itu, saya menambahkan skrip baru di saya package.jsonyang menjalankan skrip untuk bundling

if [ "$ENV" == "production" ]
then
  eval $(aws s3 cp s3://example-bucket/prod-env.sh - | sed 's/^/export /')
elif [ "$ENV" == "staging" ]
then
  eval $(aws s3 cp s3://example-bucket/stage-env.sh - | sed 's/^/export /')
else
  eval $(aws s3 cp s3://example-bucket/development-env.sh - | sed 's/^/export /')
fi

react-native start

Di dalam aplikasi Anda, Anda mungkin memiliki file konfigurasi yang memiliki:

const FIRSTENV = process.env['FIRSTENV']
const SECONDENV = process.env['SECONDENV']

yang akan diganti oleh babel ke:

const FIRSTENV = 'FIRSTVALUE'
const SECONDENV = 'SECONDVALUE'

INGAT Anda harus menggunakan process.env['STRING']TIDAK process.env.STRINGatau itu tidak akan mengkonversi dengan benar.

[Sumber] Dari apa yang saya temukan, sepertinya secara default, hanya dimungkinkan untuk melakukan konfigurasi produksi dan pengembangan (tidak ada tahapan atau lingkungan lain) - benarkah itu?

Saat ini, saya telah menggunakan file environment.js yang dapat digunakan untuk mendeteksi saluran rilis expo dan mengubah variabel yang dikembalikan berdasarkan itu, tetapi untuk membangun, saya perlu memperbarui variabel non- DEV yang dikembalikan menjadi pementasan atau melecut:

import { Constants } from 'expo';
import { Platform } from 'react-native';
const localhost = Platform.OS === 'ios' ? 'http://localhost:4000/' : 'http://10.0.2.2:4000/';
const ENV = {
  dev: {
    apiUrl: localhost,
  },
  staging: {
    apiUrl: 'https://your-staging-api-url-here.com/'
  },
  prod: {
    apiUrl: 'https://your-prod-api-url-here.com/'
  },
}
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else {
    // When publishing to production, change this to `ENV.prod` before running an `expo build`
    return ENV.staging;
  }
}
export default getEnvVars;

Alternatif

apakah ada yang punya pengalaman menggunakan react-native-dotenv untuk proyek yang dibangun dengan expo? Saya ingin mendengar pendapat Anda

https://github.com/zetachang/react-native-dotenv

Anda juga dapat memiliki skrip env yang berbeda: production.env.sh development.env.sh production.env.sh

Dan kemudian sumber mereka ketika mulai bekerja [yang hanya terikat ke alias] sehingga semua file sh telah diekspor untuk setiap variabel env:

export SOME_VAR=1234
export SOME_OTHER=abc

Dan kemudian menambahkan variabel -abel-plugin-transform-in-lingkungan-variabel akan memungkinkan mengaksesnya dalam kode:

export const SOME_VAR: ?string = process.env.SOME_VAR;
export const SOME_OTHER: ?string = process.env.SOME_OTHER;

@ chapinkapa jawabannya bagus. Pendekatan yang saya ambil sejak Mobile Center tidak mendukung variabel lingkungan, adalah mengekspos konfigurasi build melalui modul asli:

Di android:

   @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        String buildConfig = BuildConfig.BUILD_TYPE.toLowerCase();
        constants.put("ENVIRONMENT", buildConfig);
        return constants;
    } 

atau di ios:

  override func constantsToExport() -> [String: Any]! {
    // debug/ staging / release
    // on android, I can tell the build config used, but here I use bundle name
    let STAGING = "staging"
    let DEBUG = "debug"

    var environment = "release"
    if let bundleIdentifier: String = Bundle.main.bundleIdentifier {
      if (bundleIdentifier.lowercased().hasSuffix(STAGING)) {
        environment = STAGING
      } else if (bundleIdentifier.lowercased().hasSuffix(DEBUG)){
        environment = DEBUG
      }
    }

    return ["ENVIRONMENT": environment]
  }

Anda dapat membaca konfigurasi build secara sinkron dan memutuskan dalam Javascript bagaimana Anda akan berperilaku.

Dimungkinkan untuk mengakses variabel dengan process.env.blablabukan process.env['blabla']. Saya baru-baru ini membuatnya bekerja dan berkomentar tentang bagaimana saya melakukannya pada masalah di GitHub karena saya punya beberapa masalah dengan cache berdasarkan jawaban yang diterima. Inilah masalahnya.

Untuk versi RN terbaru, Anda dapat menggunakan modul asli ini: https://github.com/luggit/react-native-config