dynamic - 如何在 native react 中实现用户可选择的主题/样式？

Question

如果用户选择了浅色主题，然后切换到深色主题，则所有场景将立即渲染为使用深色主题。

如果有帮助的话，我正在使用react-native-router-flux。

提前致谢，

Answer 1

可以采用不同的方法。其中之一是使用 React context 。一般来说，应谨慎使用，但主题是合适的官方示例之一。

Theming is a good example of when you might want an entire subtree to have access to some piece of information

所以这个例子可能看起来像

class App extends Component {
  getChildContext() {
    return {theme: { primaryColor: "purple" }};
  }
  ...
}
App.childContextTypes = {
  theme: React.PropTypes.object
};

在其中为应用程序的其余部分设置上下文，然后在组件中使用它

class Button extends Component {
  render() {
    return <TouchableHighlight underlayColor={this.context.theme.primaryColor}>...
  }
}
Button.contextTypes = {
  theme: React.PropTypes.object
};

如果您想切换主题，您可以根据您的状态/ Prop (可以基于用户选择)设置上下文。

目前我们正在处理相同的问题，因此我们启动了名为 react-native-themeable 的原型(prototype)库。 。

这个想法是使用上下文来存储主题并(重新)实现 RN 组件，以便它们可以替换原始组件但支持主题化。

您可以在https://github.com/instea/react-native-themeable/blob/master/examples/src/SwitchTheme.js中找到主题切换的示例