根据状态React Native更改整个应用程序主题

Question

我正在尝试创建一个用户可以更改原色的应用程序，为此我创建了这个类

const mode = true;

export default class Colors {
    static primary() {
        return mode ? '#fff' : '#000';
    }

    static accent() {
        return mode ? '#fff' : '#000';
    }
}

和组件

const styles = StyleSheet.create({
    header: {
        height: 100,
        backgroundColor: Colors.primary()
    }
});

所以当用户点击更改主题时，模式将会改变。问题是如何在mode更改时强制所有组件和页面刷新并使用新样式？

Answer 1

如果你正在使用redux（或类似的东西）

• 在reducer中定义变量
• 将mapStateToProps函数绑定到组件
• 然后在需要时在reducer中更改该变量

Answer 2

阅读本文：

https://medium.com/@jonlebensold/getting-started-with-react-native-redux-2b01408c0053

然后您可以通过mapStateToProp访问任何页面屏幕上的状态。

但是如果你想永久存储主题，那么你必须存储在userDefault

中

noopener

Answer 3

我不知道你是否喜欢使用全局变量。但他们真的可以帮到你，你不需要一个州。只需在index.js中创建一些全局变量，例如

global.themeColorDark = "rgb(0,106,176)";
global.themeColorLight = "rgb(10,143,192)";
global.themeColorBackground = "white";

然后，您可以从应用中的任何位置访问和编辑这些变量。没有导入任何文件。