React Native 中的全局变量/常量

Posted 2023-02-22

【中文标题】React Native 中的全局变量/常量

【英文标题】：Global Variable / Constant in React Native

【发布时间】：2016-02-03 05:46:57

【问题描述】：

在 React Native 中是否有一种方法可以在全局变量上定义我将使用的所有字符串，就像在 android 开发中一样，有一个 String.xml，您可以在其中放置所有字符串。

【参考方案1】：

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

// 文件：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 模块系统，但现在你很可能会遇到 ES6 和 importmodules 而不是 require 它们。

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

【讨论】：

您也可以冻结您的对象以使您的常量实际上是恒定的。 module.exports = Object.freeze( key1: val1 );

只是一个更新，您在导入变量时缺少“var GLOBAL =...”

我有问题 - 变量值总是未定义。

如果您需要帮助，您必须显示一些代码 @VishalVaghasiya。也许在 *** 上创建一个新问题并给我发送一个链接。我会看看我能做什么。

该链接无效:(

【参考方案2】：

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

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

【讨论】：

谢谢！当您调用字符串 STRINGS.loginTitle no en 或 de

时，应用程序如何知道您是要使用 en 还是 de

react-native-localization 会做这件事。它将检查设备首选项，然后自动选择所需的语言。

我是 React 新手。我来自 ios/Android 世界。有没有一种方法可以为类似于这些平台的本地化字符串提供一个专用文件？

【参考方案3】：

我也制作了一个类似Chris Geirman's answer 的模块，但无法通过require 引用它。相反，我让它与import * as GLOBAL from '../Globals';一起工作

【参考方案4】：

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

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

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

【讨论】：

污染全局名称空间通常被认为是一种反模式

@ChrisGeirman 与手动重复该反模式的答案相比，这种内置方式有什么反模式？只是好奇

@injecteer '污染' 全局范围意味着您定义了太多全局可访问的变量。从编程的角度来看，使用全局变量会使调试和维护代码变得困难。不确定“您正在手动重复该反模式”是什么意思。你的意思是因为我使用了变量 GLOBALS？如果是这样，我明白那会令人困惑。但这实际上可以是任何名称，例如 CONSTANTS。而且它从来没有设置在全局范围内……这就是为什么你需要专门导入它。

@ChrisGeirman 如果我想要 2 或 3 个“全局变量”，它仍然是“反模式”吗？仅为他们创建一个“constants.js”文件似乎有点矫枉过正......

在你的情况下做最适合你的事情，@injecteer。是否矫枉过正......这是开发人员的决定权