web-dev-qa-db-fra.com

Variable globale / constante dans React Native

existe-t-il un moyen dans React Natif que je puisse définir sur une variable globale toutes les chaînes que je vais utiliser comme dans Android Développement il existe une chaîne. XML où vous pouvez mettre toutes vos chaînes.

androidiosreactjsreact-native
35
Sydney Loteria

Qu'est-ce que j'ai fait est de créer un module globals ...

// Fichier: Globals.js

module.exports = {
  STORE_KEY: 'a56z0fzrNpl^2',
  BASE_URL: 'http://someurl.com',
  COLOR: {
    ORANGE: '#C50',
    DARKBLUE: '#0F3274',
    LIGHTBLUE: '#6EA8DA',
    DARKGRAY: '#999',
  },
};

Ensuite, je demande juste au sommet ...

const GLOBAL = require('../Globals');

Et y accéder comme si ...

GLOBAL.COLOR.ORANGE

_____________________

MISE À JOUR le 10 février 2018

Cela semble être une réponse plutôt populaire et utile, alors j’ai pensé que je devrais le mettre à jour avec la syntaxe la plus récente. Ce qui précède fonctionne toujours dans les systèmes de modules CommonJS, mais à présent, il est tout aussi probable que vous rencontriez ES6 et importmodules plutôt que require.

Syntaxe des modules ECMAScript (ESM)

// Fichier: Globals.js

export default {
  STORE_KEY: 'a56z0fzrNpl^2',
  BASE_URL: 'http://someurl.com',
  COLOR: {
    ORANGE: '#C50',
    DARKBLUE: '#0F3274',
    LIGHTBLUE: '#6EA8DA',
    DARKGRAY: '#999',
  },
};

// utiliser...

import GLOBALS from '../Globals'; // the variable name is arbitrary since it's exported as default

// et y accéder de la même manière qu'auparavant

GLOBALS.COLOR.ORANGE
109
Chris Geirman

global in react native est comme la fenêtre du développement Web.

// declare a global varible
global.primaryColor = '***';

//now you can use this variable anywhere
console.log(primaryColor);
39
Lin Jie

J'ai aussi fait un module comme dans réponse de Chris Geirman , mais je n'ai pas pu le référencer avec l'exigence. Au lieu de cela je l'ai eu à travailler avec import * as GLOBAL from '../Globals';

10
Versa

Si vous souhaitez basculer entre les langues en fonction de la localisation de la plate-forme.

récupère node_module via npm

npm i react-native-localization --save

Définir les variables dans la classe:

// Localisation.js
let LocalizedStrings = require ('react-native-localization'); 
let strings = new LocalizedStrings ({ 
 en: { 
     loginTitle:  "Login",
 }, 
 de: {
     loginTitle:  "Anmelden",
 }
})

Lorsque vous avez besoin des chaînes:

var STRINGS = require ('./Localization');
<Text>{STRINGS.loginTitle}</Text>
6
BigPun86