React Native:如何声明和调用全局变量



我是反应原生的初学者。我熟悉PHP。在PHP中有一个全局变量叫做:$_SESSION。会话是一种存储可跨多个页面使用的信息(变量(的方法。

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

我的问题,反应原生中有全局变量吗?

如何申报?它在这里声明了吗,结构如何?

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

怎么称呼呢?像这里这样的模型吗?

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

谢谢你的帮助

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

首先,您必须创建 React 上下文本身,它允许您访问提供者和消费者组件。当你使用 createContext 使用 React 创建上下文时,你可以向它传递一个初始值。初始值也可以为 null。

请看下面:

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

其次,组件 A 必须提供给定提供程序组件的上下文。在这种情况下,它的值会立即赋予它,但它可以是从组件状态(例如获取的数据(到 props 的任何内容。如果该值来自可修改的 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,而是使值绿色可用于下面的所有 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>
);

组件可以通过使用上下文来派生其样式。使用者组件通过使用渲染道具使传递的上下文可用。可以想象,按照这种方式,每个需要根据主题设置样式的组件都可以通过使用 ThemeContext 的 Consumer 组件从 React 的上下文中获取必要的信息。您只需要使用提供程序组件,该组件将值传递一次。

我 khnow 的最好方法是使用 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

声明 => [全局.SampleVar = 'This is Global Variable';]

调用 => [控制台.log(全局。样本变量(]

在你的文件夹结构中创建一个js文件(myVariables.js(。 添加带有全局作为前缀的变量 比如:global.domain = "www.xyz.com">

然后在应用中导入文件.js(导入 ./myVariables.js( 现在访问组件中声明的全局变量 喜欢: 全球域名

最新更新