Разумная реализация темного режима в React Native

Я пытаюсь добавить поддержку темного режима в свое приложение React Native. У меня будет флаг в магазине мобксmode который будет light или dark по мере необходимости.

Чтобы связать это с существующим приложением, я хотел, если возможно, сохранить существующие определения стилей и переопределить их только при необходимости (а не переписывать все на светлую и темную тему).

Я придумал такую ​​функцию, чтобы возвращать соответствующие стили в зависимости от текущего режима:

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;
}

Представление будет отображаться как таковое:

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

Стили:

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

Теперь это работает, но я не уверен, что это связано с некоторой потерей производительности, о которой я сейчас не знаю (использование функции с использованием объекта стиля вместо StyleSheet.create...), или, если есть более простой способ, я не могу видеть деревья. Я бы тоже предпочел не делать тройную инлайн для каждого элемента.

Источник

3 ответа

Решение

В итоге я пошел немного другим путем, добавив дополнительные стили в зависимости от текущего режима, например

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

А затем, используя тему var, чтобы переопределить

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

const styles = {
  container: {
    padding: 20,
    backgroundColor: "#fff"
  },
  text: {
    fontSize: 18,
    color: "#000"
  }
};
Источник

Я бы посоветовал взглянуть на Context api в ReactJS. Это хорошее готовое решение для хранения глобальных данных в дереве компонентов.

Источник

Вы можете использовать React.createContext() а также react-native-paper

Этот модуль позволяет легко изменить фон с помощью кнопки. Я сделал вам простой пример.

Я сделал пример ссылки.

https://i.stack.imgur.com/FxwL9.gif

Источник
Другие вопросы по тегам