web-dev-qa-db-fra.com

Comment utiliser les variables globales dans React Native?

Dans React Native, je souhaite utiliser des variables globales lorsque je passe d’un écran à un autre.

Quelqu'un peut-il m'aider comment y parvenir?

react-native
41
Dev

La portée globale dans React Native est une variable globale. Tels que global.foo = foo, vous pouvez utiliser global.foo n’importe où.

Mais ne pas en abuser! À mon avis, la portée globale peut être utilisée pour stocker la configuration globale ou quelque chose comme ça. Partagez des variables entre différentes vues. Comme description, vous pouvez choisir de nombreuses autres solutions (utilisez redux, flux ou les stocker dans un composant supérieur). La portée globale n’est pas un bon choix. 

Une bonne pratique pour définir une variable globale consiste à utiliser un fichier js. Par exemple global.js

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

Ensuite, pour vous assurer qu'il est exécuté lors de l'initialisation du projet. Par exemple, importez le fichier dans index.js:

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

Maintenant, vous pouvez utiliser la variable globale n'importe où et vous n'avez pas besoin d'importer global.js dans chaque fichier. Essayez de ne pas les modifier!

54
Germinate

Essayez d'utiliser global.foo = bar dans index.Android.js ou index.ios.js , vous pouvez appeler un autre fichier js.

3
shodiqul muzaki

Vous pouvez envisager de tirer parti de la fonction contexte de React.

class NavigationContainer extends React.Component {
    constructor(props) {
        super(props);
        this.goTo = this.goTo.bind(this);
    }
    goTo(location) {
        ...
    }
    getChildContext() {
        // returns the context to pass to children
        return {
            goTo: this.goTo
        }
    }
    ...
}

// defines the context available to children
NavigationContainer.childContextTypes = {
    goTo: PropTypes.func
}

class SomeViewContainer extends React.Component {
    render() {
        // grab the context provided by ancestors
        const {goTo} = this.context;
        return <button onClick={evt => goTo('somewhere')}>
            Hello
        </button>
    }
}

// Define the context we want from ancestors
SomeViewContainer.contextTypes = {
    goTo: PropTypes.func
}

Avec context, vous pouvez transmettre des données dans l'arborescence des composants sans avoir à transmettre manuellement les accessoires à tous les niveaux. Il y a un grand avertissement sur le fait qu'il s'agisse d'une fonctionnalité expérimentale et qu'elle risque de ne plus fonctionner correctement, mais j'imagine que cette fonctionnalité existe, étant donné que la majorité des frameworks populaires tels que Redux utilisent largement context.

Le principal avantage de l’utilisation de context v.s. une variable globale est context est "portée" à un subtree (cela signifie que vous pouvez définir différentes portées pour différents sous-arbres).

Notez que vous ne devez pas transmettre vos données de modèle via context, car les modifications apportées à contextne déclenchera pas le cycle de rendu des composants de React. Cependant, je le trouve utile dans certains cas d'utilisation, en particulier lors de l'implémentation de votre propre framework ou flux de travail personnalisé.

3
Ivan Choo

Vous pouvez utiliser le mot clé global pour résoudre ce problème.

Supposons que vous souhaitez déclarer une variable appelée isFromManageUserAccount en tant que variable globale, vous pouvez utiliser le code suivant.

global.isFromManageUserAccount=false;

Après avoir déclaré cela, vous pouvez utiliser cette variable n’importe où dans l’application. 

1
Madhavi Jayasinghe

Mettre en place un conteneur de flux

exemple simple

import alt from './../../alt.js';

    class PostActions {
        constructor(){
        this.generateActions('setMessages');
        }

        setMessages(indexArray){
            this.actions.setMessages(indexArray);
        }
    }


export default alt.createActions(PostActions);

magasin ressemble à ceci

class PostStore{

    constructor(){

       this.messages = [];

       this.bindActions(MessageActions);
    }




    setMessages(messages){
        this.messages = messages;
    }
}

export default alt.createStore(PostStore);

Ensuite, chaque composant qui écoute le magasin peut partager cette variableDans votre constructeur est l'endroit où vous devez l'attraper

constructor(props){
    super(props);

   //here is your data you get from the store, do what you want with it 
    var messageStore = MessageStore.getState();

}


    componentDidMount() {
      MessageStore.listen(this.onMessageChange.bind(this));
    }

    componentWillUnmount() {
      MessageStore.unlisten(this.onMessageChange.bind(this));
    }

    onMessageChange(state){ 
        //if the data ever changes each component listining will be notified and can do the proper processing. 
   }

De cette façon, vous pouvez partager vos données via l'application sans que chaque composant ait à communiquer entre eux.

1
Ortho Home Defense

La façon dont vous devriez le faire dans React Native (si je comprends bien) consiste à enregistrer votre variable "globale" dans votre index.js, par exemple. De là, vous pouvez ensuite le transmettre à l'aide d'accessoires.

Exemple:

    class MainComponent extends Component {

        componentDidMount() {
            //Define some variable in your component
            this.variable = "What's up, I'm a variable";
        }
        ...
        render () {
            <Navigator
                renderScene={(() => {
                    return(
                        <SceneComponent
                                //Pass the variable you want to be global through here
                                myPassedVariable={this.variable}/>
                    );
                })}/>
        }
    }


    class SceneComponent extends Component {

        render() {
            return(
                <Text>{this.props.myPassedVariable}</Text>
            );
        }

    }
0
stinodes