Javascript 如何在React Native中通过应用程序中的按钮更改主题颜色？

您好，我遵循此链接并使用上下文实现主题更改：

很好用。现在，您希望使用异步存储来存储颜色，并在应用程序的前台/组件willmount中检索颜色

如何在render或JSX标记之外的任何方法中使用appConsumer.UpdateTime（BlueGray）

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

render（）{
返回(
{appConsumer=>(
this.props.navigation.navigate（'RouteNameTwo'）}
/>
appConsumer.updateTheme（蓝灰色）}title=“蓝灰色主题”>
appConsumer.updateTheme（浅绿色）}title=“浅绿色主题”>
)}
);
}

如果您正在使用功能组件，只需使用“useContext”钩子即可访问上下文

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

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

class ScreenComponentOne扩展了React.Component{
静态上下文=上下文；
静态导航选项={
标题：“第一屏”，
};
render（）{
返回(
this.props.navigation.navigate（'RouteNameTwo'）}
/>
this.context.updateTime（BlueGray）}title=“Blue Gray主题”>
this.context.updateTheme（浅绿色）}title=“浅绿色主题”>
)
}
}

这里

'staticcontext=context；'上下文将是您创建的上下文，应该将其导出并导入到此文件，但该值将基于组件树进行设置

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