javascript - React Native 中关于 Context API 的完整解释

问题描述

我对 Context API 的工作原理有点困惑

正如文档所说的Context Provider：

接受要传递给作为此 Provider 后代的消费组件的 value prop。一个提供者可以连接到多个消费者。可以嵌套提供程序以覆盖树中更深的值。

我刚开始尝试这样的简单代码：

//App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.changeColor=(color, value)=>{
      this.setState({[color]:value})
    }
    this.state={
      changeColor:this.changeColor,
      red:0,
      green:0,
      blue:0,
    }
  }

  render() {
    console.disableYellowBox = true;
    return (
      <ThemeContext.Provider value={this.state}>
        <InitialScreen/>
      </ThemeContext.Provider>
    );
  }
}

//InitialScreen.js

export default class Login extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({red, green, blue, changeColor})=>(
          <View style={{flex:1}}>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Red: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={red}
                onValueChange={(e)=>{changeColor('red', e)}}
              />
            </View>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Green: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={green}
                onValueChange={(e)=>{changeColor('green', e)}}
              />
            </View>
            <View style={{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Blue: </Text>
              <Slider
                style={{width:'80%'}}
                minimumValue={0}
                maximumValue={255}
                step={1}
                value={blue}
                onValueChange={(e)=>{changeColor('blue', e)}}
              />
            </View>
            <View style={[GlobalStyles.Center, {flex:1, backgroundColor:'rgb('+red+', '+green+', '+blue+')'}]}>
            </View>
          </View>
        )}
      </ThemeContext.Consumer>
    );
  }
}

//themeContext.js

import React from 'react';

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
})

我不知道Objectinside是什么意思React.createContext({...})，我可以传入这意味着我不需要在 AFAIK 中定义任何this.state东西，Provider value propsReact.createContext({...})

或者我做错了什么，所以我Context本身就没有功能了？

标签： javascriptreactjsreact-native

javascript - React Native 中关于 Context API 的完整解释

问题描述

解决方案

推荐阅读