2
votes

Comment implémenter l'API de contexte dans React Native

Je commence juste à chercher un changement de thème global, et j'ai trouvé que Context peut le faire, mais j'ai un problème pour implémenter l'exemple de code dans mon projet natif react,

J'ai essayé ce code:

//themeContext.js

const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
})

//App.js

import React, { Component } from 'react';
import {InitialScreen} from './routes/routes';
import { ThemeContext } from './Component/themeContext';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state={
      theme:themes.light,
      toggleTheme:this.toggleTheme
    }
    this.toggleTheme=()=>{
      this.setState(state=>({
        theme:state.theme === themes.dark ? themes.light : themes.dark
      }))
    }
  }

  render() {
    console.disableYellowBox = true;
    return (
      <ThemeContext.Provider value={this.state}>
        //this is Login.js
        <InitialScreen/>
      </ThemeContext.Provider>
    );
  }
}

//Login.js

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { ThemeContext } from '../Component/themeContext';

export default class Login extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({theme, toggleTheme})=>{
          <View style={{backgroundColor:theme.background}}>
            <Text>{this.state}</Text>
          </View>
        }}
      </ThemeContext.Consumer>
    );
  }
}

mais je avoir une erreur Impossible de trouver la variable: Composant , je ne sais pas où dois-je mettre importer React de 'react'; parce que je pense avoir ajouté Composant var dans app.js et login.js

toute aide serait appréciée

javascript reactjs react-native

1 commentaires

Hey @flix, les thèmes fonctionnent-ils avec toi?

3 Réponses :

0
votes

Remplacez la chaîne suivante en haut de votre Login.js au lieu de

export default class Login extends React.Component {
}

par

export default class Login extends Component {
}

Une autre façon est de remplacer p>

import React, { Component } from 'react';

avec

import React from 'react';

2 commentaires

après avoir ajouté import React, {Component} de 'react'; J'ai une nouvelle erreur Impossible de trouver la variable: React que s'est-il passé?

Exactement le même code fonctionne bien dans votre App.js , donc quelque chose ne va pas ou est confus à vos côtés. Essayez de redémarrer l'application cra (ou le serveur de développement Webpack), sinon cela aide à supprimer node_modules et à récupérer les packages

0
votes

Dans App.js a mis à jour la définition de votre classe de composant App en remplaçant Component par React.Component comme indiqué:

export default class Login extends React.Component {

   /* existing component code */
}

5 commentaires

@flix importez-vous toujours des réactions via cette méthode? importer React depuis 'react'; ?

juste au cas où j'utilisais exporter la classe par défaut MyClass extend React.Component {...} J'utilise import React from 'react'; comme vous l'avez suggéré

@flix qu'est-ce que MyClass ? êtes-vous sûr que ce code est à l'origine de l'erreur ou obtenez-vous une erreur d'une autre partie de votre projet?

MyClass est un autre mot de Login et App , le problème résolu lorsque j'ajoute import React depuis 'react'; dans themeContext.js . Je pensais que je n'avais pas besoin de l'importer car la documentation dit simplement Assurez-vous que la forme de la valeur par défaut transmise à // createContext correspond à la forme attendue par les consommateurs!

@flix oh - oui, vous devrez importer react dans les modules où vous utilisez l'API de contexte de réaction (en supposant que vous le fassiez). J'espère que cela a aidé!

0
votes

Votre problème dans le fichier themeContext.js

vous utilisez createContext () mais vous n'importez pas React donc vous ne trouverez pas React p>

ça devrait être comme ça

import React,{Component} from 'react';

Et dans Login.js

import React from 'react';
export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

0 commentaires