React Native是否具有全局范围？如果没有，我怎么能模仿呢？

Question

I haven't been able to find anything like

$rootScope

for React Native and I want to share a couple variables between different Views.

Answer 1

The global scope in React Native is variable global.

global.foo = foo

Then you can use global.foo anywhere.

But do not abuse it! In my opinion, global scope may used to store the global config or something like that. Share variables between different views, as your description, you can choose many other solutions(use redux,flux or store them in a higher component), global scope is not a good choice.

A good practice to define global variable is to use a js file. For example global.js :

global.foo = foo;
global.bar = bar;

Then, to make sure it is executed when project initialized. For example, import the file in index.js :

import './global.js'
// other code

Now, you can use the global variable anywhere, and don't need to import global.js in each file. Try not to modify them!

Answer 2

For example, you can export class with static properties and then import there when need.

In main.js for example:

export class AppColors {
    static colors = {main_color: "#FFEB3B", secondary_color: "#FFC107"}
}

In other file, where need to get this colors

import { AppColors } from './main.js';

class AnotherPage {
    constructor() {
        super();
        console.log(AppColors.colors); // youla! You will see your main and secondary colors :)
    }
}

Answer 3

Storing variables in the global scope is a bit of an anti-pattern in React. React is intended to be used with a one-way data flow, meaning data flows down from components to their children. This is achieved through the passing of props .

In order to share a value between multiple views, you would either need to store the data on a shared parent component and pass it down as a prop OR store it in a separate entity that is responsible for data management. In ReactJS this is achieved through patterns like Flux , but I'm not sure about the options for react-native.

Answer 4

Step 1. create ConstantFile.js File and put this code.

export class ConstantClass {
    static webserviceName = 'http://172.104.180.157/epadwstest/';
    static Email = 'emailid';
    static Passoword = 'password';
}

Step 2. Access as like below. But before that, you need to import your js file to particular class file something like that

import { ConstantClass } from './MyJS/ConstantFile.js';

ConstantClass.webserviceName

ConstantClass.Email

ConstantClass.Passoword

Answer 5

You can store those values in parent components state. Then pass methods changing those values via props or context / or like @Jakemmarsh suggested - use Flux / Redux approach.

OR, you can use AsyncStorage . Its useful for storing app data like tokens and such.