web-dev-qa-db-ja.com

グローバル変数/定数React Native

Reactネイティブで、Android開発に文字列があります。すべての文字列を配置できるxml。

androidiosreactjsreact-native
35
Sydney Loteria

私がやったことは、グローバルモジュールを作成することです...

//ファイル：Globals.js

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

それから私は一番上でそれを必要とします...

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

そして、それらにアクセスします...

GLOBAL.COLOR.ORANGE

_____________________

2018年2月10日に更新

これは非常に人気があり有用な答えであると思われるので、最新の構文で更新する必要があると思いました。上記はCommonJSモジュールシステムでも動作しますが、最近ではES_6やimportではなくrequiremodulesに遭遇する可能性が高くなっています。

ECMAScriptモジュール（ESM）構文

//ファイル：Globals.js

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

//使用するには...

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

//そして以前と同じ方法でそれらにアクセスします

GLOBALS.COLOR.ORANGE
109
Chris Geirman

反応ネイティブのglobalは、Web開発のウィンドウのようなものです。

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

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

私も Chris Geirmanの答え のようなモジュールを作成しましたが、requireでそれを参照できませんでした。代わりに、import * as GLOBAL from '../Globals';

10
Versa

プラットフォームのローカライズに依存する言語を切り替える場合。

npm経由でnode_moduleを取得

npm i react-native-localization --save

クラスの変数を定義：

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

文字列が必要な場合：

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