Question

如果用户选择了灯光主题，并切换到暗主题，那么所有场景都会立即呈现为使用暗主题。

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

提前致谢，

Answer 1

不同的方法是可能的。其中之一是使用React context。一般情况下应谨慎使用，但主题是合适的官方示例之一。

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

所以示例可能看起来像

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

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

        XmlDocument xmlText = new XmlDocument();
        xmlText.Load(yourXml);
        XmlElement root = xmlText.DocumentElement;
        XmlNamespaceManager nsmgr = new XmlNamespaceManager(xmlText.NameTable);
        nsmgr.AddNamespace("t", "http://www.ebay.com/marketplace/search/v1/services");
        XmlNodeList xnList = xmlText.SelectNodes("//t:item", nsmgr);
        foreach (XmlNode item in xnList)
        {
            string title = item["title"].InnerText;
            Console.WriteLine(title);
        }

如果要切换主题，可以根据用户选择的状态/道具设置上下文。

目前我们正在处理相同的问题，因此我们开始使用名为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

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

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

3 个答案: