明智地在React Native中实现暗模式

Question

我正在尝试向我的React Native应用添加暗模式支持。我将在mobx存储区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 ...），或者如果有一种更简单的方法我看不到树木。我也不想对每个元素都进行三元内联。

Answer 1

我最终采用了稍微不同的方式，因为我会根据当前模式添加其他样式，例如

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

Answer 2

我建议您看一下ReactJS中的Context api。它提供了一个很好的即用型解决方案，用于维护组件树周围的全局数据。

Answer 3

您可以使用React.createContext()和react-native-paper

此模块使您只需单击一个按钮即可轻松更改背景。我为你做了一个简单的例子。

我做了一个example link.