React Native 中的全局变量/常量

IT技术 android ios reactjs react-native
2021-05-09 09:26:42

在 React Native 中有没有一种方法可以在全局变量上定义我将在 Android 开发中使用的所有字符串,有一个 String.xml,您可以在其中放置所有字符串。

4个回答

我所做的是创建一个全局module......

// 文件: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 module系统,但现在你很可能会遇到 ES6 和importmodule而不是require它们。

ECMAScript module (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

global 在 React Native 中就像 Web 开发中的窗口。

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

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

我也像Chris Geirman 的回答一样制作了一个module,但无法使用 require 来引用它。相反,我得到了它的工作import * as GLOBAL from '../Globals';

如果您想根据平台本地化在语言之间切换。

通过 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>