使用 react-context 后出现黑屏问题

Posted 2023-04-14

【中文标题】使用 react-context 后出现黑屏问题

【英文标题】：Problem with blank screen after using react-context

【发布时间】：2019-06-01 02:30:20

【问题描述】：

我正在尝试制作动态主题，但我遇到了问题。当我将 React.context 与 Provider 和 Consumer 一起使用时，我的应用程序不会在屏幕上显示任何内容。

这是我的 App.js

import React from 'react';
import Route from './route/Route';
import  ThemeProvider  from './reusables/theme/themeContext';

const AppContainer = createAppContainer(Route);

export default class App extends React.Component 
  render() 
    return (
      <ThemeProvider>
        <AppContainer/>   
      </ThemeProvider>
    );
  

--路线

import  createStackNavigator  from "react-navigation";

const BaseStack = createStackNavigator(

    Overview:  
      screen: OverviewScreen,
      navigationOptions:  header: null, ,
    ,
    
      initialRouteName: 'Overview',
    
)
export default BaseStack;

-- 提供者类

import React, Component from 'react';

const ThemeContext = React.createContext(
    themeColor: '#f45',
    changeThemeColor: () => null,    
);

export const ThemeConsumer = ThemeContext.Consumer;

export class ThemeProvider extends Component 
    state = 
        themeColor: '#f45',
    

    changeThemeColor = (themeColor) => 
        this.setState( themeColor );
    

    render() 
        return (
            <ThemeContext.Provider 
                value=
                    themeColor: this.state.themeColor,
                    changeThemeColor: this.changeThemeColor,
                >
                 this.props.children 
            </ThemeContext.Provider>
        )
    

-- 子组件

import React,  Component  from 'react';
import  View, StatusBar, ScrollView, Toastandroid  from 'react-native';

/* --- STYLES - COLORS ---*/
import gStyle from '../styles/Style.global';
import  ThemeConsumer  from '../reusables/theme/themeContext';

export default class OverviewScreen extends Component 
    constructor(props) 
        super(props);
        this.state = 
        
    

    render() 
        return (
            <ThemeConsumer>
                ( themeColor ) => 
                    <View style=[backgroundColor: themeColor, gStyle.container]>
                        <StatusBar hidden/>
                        this.overviewPage()
                    </View>
            
        </ThemeConsumer>
    );

当我尝试运行应用程序屏幕是空白的。控制台没有警告。我不知道如何解决这个问题。

【参考方案1】：

您的道具没有被传递给 AppContainer：

export default class App extends React.Component 
  render() 
    return (
      <ThemeProvider>
        <AppContainer ...this.props />   
      </ThemeProvider>
    );
  

【讨论】：

不幸的是，它仍然不起作用。像子组件一样仍然是空白屏幕无法呈现。

【参考方案2】：

你没有从 Context.Consumer 返回任何东西

编辑：迟到总比不到好。