React Native：如何声明和调用全局变量答案

【问题标题】：React Native: How to declare and call global variablesReact Native：如何声明和调用全局变量
【发布时间】：2019-12-17 05:19:11
【问题描述】：

我是 React Native 的初学者。我熟悉PHP。在 PHP 中有一个名为：$_SESSION 的全局变量。 Session 是一种存储可跨多个页面使用的信息（变量）的方式。

我用 react native 创建了一个登录页面，通过获取到 mysql 数据库，我得到了用户的身份，这个身份将在许多后续页面的各种进程中使用。我想让用户的身份作为一个全局变量。

我的问题，react native 中有全局变量吗？

如何申报？是在这里声明的吗？结构如何？

    constructor(props){
        super(props);
        this.state={
        }
    }

怎么称呼它？像这里这样的模型吗？

    const { navigation } = this.props;
    data={this.props.navigation.state.params.ds}

感谢您的帮助

【问题讨论】：

一种方法是您可以使用screenProps 跨不同组件发送数据
如果任何 UI 显示依赖于该数据，您可能希望使用 redux.js.org。

标签： reactjs react-native

【解决方案1】：

您可以使用 React 上下文，它提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递道具。

首先，您必须创建 React Context 本身，它可以让您访问 Provider 和 Consumer 组件。当您通过使用 createContext 使用 React 创建上下文时，您可以向它传递一个初始值。初始值也可以为空。

请看如下：

// src/ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext(null);
export default ThemeContext;

其次，组件 A 必须为给定的 Provider 组件提供上下文。在这种情况下，它的值会立即赋予它，但它可以是从组件状态（例如获取的数据）到道具的任何东西。如果值来自可修改的 React State，则传递给 Provider 组件的值也可以更改。

// src/ComponentA.js
import React from 'react';
import ThemeContext from './ThemeContext';
const A = () => (
  <ThemeContext.Provider value="green">
    <D />
  </ThemeContext.Provider>
);

组件 A 仅显示组件 D，但不向它传递任何 props，而是使值 green 可用于下面的所有 React 组件。其中一个子组件将是最终使用上下文的组件 C。

第三，在您的组件 C 中，在组件 D 下方，您可以使用上下文对象。请注意，组件 A 不需要在 props 中通过组件 D 传递任何内容，以便到达组件 C。

// src/ComponentC.js
import React from 'react';
import ThemeContext from './ThemeContext';
const C = () => (
  <ThemeContext.Consumer>
    {value => (
      <p style={{ color: value }}>
        Hello World
      </p>
    )}
  </ThemeContext.Consumer>
);

组件可以通过使用上下文来派生其样式。 Consumer 组件通过使用渲染道具使传递的上下文可用。可以想象，按照这种方式，每个需要根据主题进行样式设置的组件现在都可以通过使用 ThemeContext 的 Consumer 组件从 React 的 Context 中获取必要的信息。你只需要使用 Provider 组件，它会在它们上方的某个地方传递一次值。

【讨论】：

【解决方案2】：

declare => [global.SampleVar = '这是全局变量。';]

调用 => [console.log(global.SampleVar)]

【讨论】：

【解决方案3】：

我知道的最好方法是使用redux ，但如果你不想，你可以创建一个 global.ts 文件，定义变量，创建 setter 和 getter 等等......

global.ts

class Variables {
    private myNumber:number = 0;
    private myName:string = ''
    // you can define more variables

    public get_myNumber(){
        return this.myNumber;
    }

    public set_myNumber(new_number:number){
        this.myNumber = new_number;
    }

    public get_myName(){
        return this.myname;
    }

    public set_myName(new_name:string){
        this.myName = new_name;
    }

}

export default new Variables() // this line is important because make this class singleton,so it will same in every where you want to use it
//also you can use react and react native functionality like Dimension as like as use in normal js file,for example you can set width and heigth from "import { Dimension } from 'react-native' in this file and use it globaly

【讨论】：

【解决方案4】：

在您的文件夹结构 (myVariables.js) 中创建一个 js 文件。以全局为前缀添加您的变量比如：global.domain = "www.xyz.com"

然后在你的 app.js 中导入文件（import ./myVariables.js）现在访问组件中声明的全局变量比如：global.domain

【讨论】：