Проблема с пустым экраном после использования response-context

Question

Я пытаюсь создавать динамические темы, но у меня проблема. Когда я использую React.context с провайдером и потребителем, мое приложение ничего не отображает на экране.

Это мой 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>
    );
}

Когда я пытаюсь запустить приложение, экран пуст. В консоли нет предупреждений. Я не знаю, как решить эту проблему.

Answer 1

Ваши реквизиты не передаются в AppContainer:

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