React native не может изменить переменную в App.js - PullRequest
Новая
       35

React native не может изменить переменную в App.js

0 голосов
/ 21 сентября 2019

Я пытаюсь применить множественные темы в моем собственном приложении, но не могу найти способ изменить переменную, которая используется в <Provider>, обернутом вокруг <MyApp />, я чувствую, что любое изменение происходит в приложении.js - это анти-паттерн;

Моя цель - передать изменения провайдеру react-native-paper, который входит в число провайдеров Redx;

есть ли способ обойти это;

App.js

    import * as React from 'react';
import {DefaultTheme, Provider as PaperProvider} from 'react-native-paper';
import {mapping, light, dark} from '@eva-design/eva';
import AppNavigator from './src/navigation';
import {Provider} from 'react-redux';
import {configureStore} from './src/store';


export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      theme: configureStore().getState().app.themeColor,
    };
  }

  render() {
    const {theme} = this.state;
    return (
      <Provider store={configureStore()}>
        <PaperProvider theme={theme === 'light' ? themeLight : themeDark}>
          <AppNavigator />
        </PaperProvider>
      </Provider>
    );
  }
}

const themeLight = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f',
  },
};

const themeDark = {
  ...DefaultTheme,
  roundness: 2,
  dark: true,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f',
  },
};

AppNavigator.js 

import {
  createAppContainer,
  createStackNavigator,
  createSwitchNavigator,
  createDrawerNavigator,
} from 'react-navigation';

import Welcome from '../components/welcome';

const HomeStack = createStackNavigator(
  {
    Home: {screen: Welcome},
  },
  {
    headerMode: 'none',
    navigationOptions: {
      header: 'none',
    },
  },
);

export default createAppContainer(
  createSwitchNavigator(
    {
      //Intro: IntroStack,
      Home: HomeStack,
    },
    {
      initialRouteName: 'Home',
    },
  ),
);
...