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

Question

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

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

提前致谢

Answer 1

可能有不同的方法。其中之一是使用React上下文。一般来说，它应该谨慎使用，但主题是一个正式的例子，它是合适的。

主题是一个很好的例子，当您可能希望整个子树可以访问某些信息

时

所以这个例子看起来像

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

如果你想切换主题，你可以根据你的状态/道具来设置上下文，这些可以基于用户的选择。

目前我们正在处理同样的问题，因此我们已经开始原型库称为react-native-themeable。

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

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

Answer 2

您可以首先创建一个JS文件，其中包含两个对象，每个对象具有每个主题的颜色。然后只使用一个作为默认值，如果用户选择另一个主题，则将其保存在数据库中或使用本地存储并拉出相关对象。

export const theme1 = {
     blue: '#fddd',
     red: '#ddddd',
     buttonColor: '#fff'
 }
export const theme2 = {
     blue: '#fddd',
     red: '#ddddd'
     buttonColor: '#fff'
 }

然后导入相关文件:

import * as themes from 'Themes'
const currentTheme = this.props.currentTheme ? this.props.currentTheme : 'theme1'
const styles = StyleSheet.create({
   button: {
     color: themes[currentTheme].buttonColor
   },
})

Answer 3

如果你能直接导入一个colors对象，并在每次更改主题时修改该对象，并让这些新颜色传播到整个应用程序，那不是很好吗?那么您的组件就不需要有任何特殊的主题逻辑。我能够使用AsyncStorage，强制应用重启和异步模块加载的组合来实现这一点。