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

标签 dynamic react-native styles themes

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

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

提前致谢,

最佳答案

可以采用不同的方法。其中之一是使用 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中找到主题切换的示例

关于dynamic - 如何在 native react 中实现用户可选择的主题/样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39079700/

相关文章:

javascript - TinyMCE 在保存时添加样式

Angular mat-checkbox 不同复选框的不同边框颜色

perl - 如何在嵌入式 perl 解释器中动态加载 perl 扩展?

php - 实现第一,上一个,下一个和最后一个导航的方法

c++ - 在类数据结构中存储地址和路由信息

javascript - 如何在 Jest 中使用回调来模拟 react 导航导航功能

react-native - react 导航错误 : Before Calling 'reduxfiyNavigator' , 请调用 'createReactNavigationReduxMiddleware' ,

c# - 在 C# 中指定泛型类型参数时如何使用 `dynamic`?

javascript - react native ScrollView 不滚动

css - 如何使用 scss 为元素声明两个类