如何通过 React Native 中跨应用程序的按钮更改主题颜色? [英] How to change theme color through a button across App in React Native?

问题描述

我点击了这个链接并使用上下文实现了主题更改:

Hi I followed this link and implemented theme change using the Context:

如何通过在 React Native 中切换?

它工作正常.现在想使用 asyncstorage 来存储主题颜色并在前台/componentWillMount 中的 App 上检索它

it's working fine. now want use asyncstorage to store themecolor and retrieve it on App in the foreground/componentWillMount

如何在 render 或 JSX 标签之外的任何方法中使用 appConsumer.updateTheme(BlueGray)?

how do i use appConsumer.updateTheme(BlueGray) in any method outside render or JSX tag?

render() {
    return (
      <AppConsumer>
          { appConsumer => (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          backgroundColor: appConsumer.theme.colors.primary
        }}>
        <Button
          title="Go to two"
          onPress={() => this.props.navigation.navigate('RouteNameTwo')}
        />
        <Button onPress={ () => appConsumer.updateTheme(BlueGray) } title="Blue Gray Theme"></Button>
        <Button onPress={ () => appConsumer.updateTheme(LightGreen) } title="Light Green Theme"></Button>
      </View>
                      )}
            </AppConsumer>
    );
  }

推荐答案

如果您使用的是功能组件，您可以简单地使用useContext"挂钩并访问上下文.

If you are using a functional component you can simply go with the 'useContext' hook and get access to context.

由于您的要求是使用 componentDidMount，因此您必须使用一个类 contextType，它基本上是您类中指向上下文的静态变量.

As your requirement is to use componentDidMount you will have to go with a class contextType which will be basically a static variable in your class which points to the context.

代码如下所示，(这是基于您提供的其他问题链接)

The code would be like below, (This is based on the other question link that you have provided)

class ScreenComponentOne extends React.Component {
    static context = Context;
    static navigationOptions = {
        headerTitle: 'First screen',
    };

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    backgroundColor: this.context.theme.colors.primary
                }}>
                <Button
                    title="Go to two"
                    onPress={() => this.props.navigation.navigate('RouteNameTwo')}
                />
                <Button onPress={() => this.context.updateTheme(BlueGray)} title="Blue Gray Theme"></Button>
                <Button onPress={() => this.context.updateTheme(LightGreen)} title="Light Green Theme"></Button>
            </View>
        )
    }
}

here 'static context = Context;' Context 将是您创建的上下文，它应该导出并导入到此文件中，但该值将根据组件树进行设置.

here 'static context = Context;' the Context would be the context that you created, it should be exported and imported to this file, but the value would be set based on the component tree.

这篇关于如何通过 React Native 中跨应用程序的按钮更改主题颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！