Implémenter judicieusement le mode sombre dans React Native

Question

J'essaie d'ajouter le support du mode sombre à mon application React Native. Je vais avoir un drapeau dans un magasin mobx mode qui sera light o dark le cas échéant.

Afin de l'intégrer à une application existante, je voulais, si possible, conserver les définitions de style existantes et ne les remplacer qu'en cas de besoin (plutôt que de tout réécrire pour un thème clair et un thème foncé).

J'ai créé une fonction comme la suivante pour retourner les styles appropriés en fonction du mode actuel :

function getStyle(style) {
  let ret = [styles[style]];
  if (
    styles.hasOwnProperty(Store.mode) &&
    styles[Store.mode][style] !== "undefined"
  ) {
    ret.push(styles[Store.mode][style]);
  }
  return ret;
}

La vue serait rendue comme telle :

...
<View style={getStyle("container")}>
  <Text style={getStyle("text")}>Some text</Text>
</View>
...

Les styles :

const styles = {
  dark: {
    container: {
      backgroundColor: "#000"
    },
    text: {
      color: "#fff"
    }
  },
  container: {
    padding: 20,
    backgroundColor: "#fff"
  },
  text: {
    fontSize: 18,
    color: "#000"
  }
};

Maintenant, cela fonctionne, mais je ne suis pas sûr qu'il y ait un coût de performance dont je ne suis pas conscient pour le moment (l'utilisation de la fonction, l'utilisation d'un objet style au lieu de StyleSheet.create ...), ou s'il existe un moyen beaucoup plus simple que je ne vois pas pour les arbres. Je ne préfère pas non plus faire un ternaire en ligne sur chaque élément.

Answer 1

J'ai fini par suivre une voie légèrement différente, en ajoutant des styles supplémentaires en fonction du mode en cours, par ex.

<View style={[styles.container, theme[Store.mode].container]}>
  <Text style={[styles.text, theme[Store.mode].text]}>Some text</Text>
</View>

Et ensuite, en utilisant la variable du thème pour remplacer

const theme = {
  light: {},
  dark: {
    container: {
      backgroundColor: "#000"
    },
    text: {
      color: "#fff"
    }
  }
};

const styles = {
  container: {
    padding: 20,
    backgroundColor: "#fff"
  },
  text: {
    fontSize: 18,
    color: "#000"
  }
};

Answer 2

Je vous suggère de jeter un coup d'œil à la Contexte api dans ReactJS. Il offre une bonne solution prête à l'emploi pour maintenir les données globales autour de l'arbre des composants.

Answer 3

Vous pouvez utiliser React.createContext() y react-native-paper

Ce module permet de changer facilement l'arrière-plan à l'aide d'un simple bouton. J'ai fait un exemple simple pour vous.

J'ai fait un exemple de lien.