Javascript 在React Native中创建主题提供程序组件

我的应用程序需要提供一个颜色主题，我正在尝试使用React上下文实现一个主题提供组件，但它不起作用。我不知道如何从主题提供程序的上下文中获取

theme

prop对象，以及如何调用作为主题提供程序状态的

updateTheme

函数？这是我的代码：

ThemeProvider

import React from "react";
import { LightTheme, DarkTheme } from '../themes'

const Context = React.createContext();

export class ThemeProvider extends React.Component {
  
  state = {
    theme: LightTheme,
    updateTheme: (theme) => {
      this.setState({ theme: theme })
    }
  }

  render() {
    const { theme } = this.state
    return (
      <Context.Provider value={this.state} theme={theme} >
        { this.props.children }
      </Context.Provider>
    )
  }
}

export default ThemeProvider;

主题

export const LightTheme = {
   dark: false,
   colors: {
      primary: 'rgb(255, 45, 85)',
      background: 'rgb(242, 242, 242)',
      card: 'rgb(255, 255, 255)',
      text: 'rgb(28, 28, 30)',
      border: 'rgb(199, 199, 204)',
      notification: 'rgb(255, 69, 58)',
   }
}

export const DarkTheme = {
   dark: true,
   colors: {
      primary: 'rgb(255, 45, 85)',
      background: 'rgb(0, 0, 0)',
      card: 'rgb(255, 255, 255)',
      text: 'rgb(28, 28, 30)',
      border: 'rgb(199, 199, 204)',
      notification: 'rgb(255, 69, 58)',
   },
};

---

你已经完成了主要的部分，你只需要做一些小的改变就可以让它工作

首先 要更改上下文的值，必须导出上下文。然后访问消费者

import React from "react";
import { LightTheme, DarkTheme } from '../themes'

export const Context = React.createContext();

export class ThemeProvider extends React.Component {
  
  state = {
    theme: LightTheme,
    updateTheme: (theme) => {
      this.setState({ theme: theme })
    }
  }

  render() {
    const { theme } = this.state
    return (
      <Context.Provider value={this.state} theme={theme} >
        { this.props.children }
      </Context.Provider>
    )
  }
}

export default ThemeProvider;

从“React”导入React；
从“../themes”导入{LightTheme，DarkTheme}
export const Context=React.createContext（）；
导出类ThemeProvider扩展React.Component{
状态={
主题：LightTheme，
更新名称：（主题）=>{
this.setState（{theme:theme}）
}
}
render（）{
const{theme}=this.state
返回(
{this.props.children}
)
}
}
导出默认ThemeProvider；

在子组件（在您的案例中是导航栏）中，您必须导入它并使用使用者进行更新 导入如下上下文（实际路径可能会有所不同）

从“/ThemeProvider”导入ThemeProvider，{Context}；
类NavBar扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{（{theme，updateTheme}）=>(
updateTheme（theme.dark？LightTheme:DarkTheme）}
/>
标题
)}
);
}
}

{（{theme，updatetime}）=>（ 上面这一行提供了对上下文中主题值的访问，并更新了我。

---

您可以尝试代码。

我尝试了您的代码，但出现错误，导航栏组件中的

theme

值未定义。我不明白是什么wrong@anDev你能试试这个按钮吗class Btn extends React.Component{render（）{return（{（{theme，updatetime}）=>（{JSON.stringify（theme）}updateTheme（theme.dark？LightTheme:DarkTheme）}/>）}；}}得到了相同的错误：

undefined不是一个对象（计算'\u ref.theme'）

你能试试这个吗

export const LightTheme = {
   dark: false,
   colors: {
      primary: 'rgb(255, 45, 85)',
      background: 'rgb(242, 242, 242)',
      card: 'rgb(255, 255, 255)',
      text: 'rgb(28, 28, 30)',
      border: 'rgb(199, 199, 204)',
      notification: 'rgb(255, 69, 58)',
   }
}

export const DarkTheme = {
   dark: true,
   colors: {
      primary: 'rgb(255, 45, 85)',
      background: 'rgb(0, 0, 0)',
      card: 'rgb(255, 255, 255)',
      text: 'rgb(28, 28, 30)',
      border: 'rgb(199, 199, 204)',
      notification: 'rgb(255, 69, 58)',
   },
};

import React from "react";
import { LightTheme, DarkTheme } from '../themes'

export const Context = React.createContext();

export class ThemeProvider extends React.Component {
  
  state = {
    theme: LightTheme,
    updateTheme: (theme) => {
      this.setState({ theme: theme })
    }
  }

  render() {
    const { theme } = this.state
    return (
      <Context.Provider value={this.state} theme={theme} >
        { this.props.children }
      </Context.Provider>
    )
  }
}

export default ThemeProvider;

import ThemeProvider, { Context } from './ThemeProvider';


class NavBar extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Context.Consumer>
        {({ theme, updateTheme }) => (
          <Header>
            <Left>
              <Button
                title="Update Theme"
                onPress={() => updateTheme(theme.dark ? LightTheme : DarkTheme)}
              />
              <Button transparent>
                <Icon name="add" size={Layout.navIconSize} />
              </Button>
            </Left>
            <Body>
              <Title>Header</Title>
            </Body>
            <Right>
              <Button transparent>
                <Icon name="alarm" size={Layout.navIconSize} />
              </Button>
            </Right>
          </Header>
        )}
      </Context.Consumer>
    );
  }
}