thématique reac-native-navigation avec des composants de style

Question

Je travaille avec styled-components sur mon projet react-native. Nous utilisons react-native-navigation pour effectuer la navigation au sein de l'application. Donc, la question est de savoir comment puis-je mettre en œuvre un motif de thème à partir de composants stylisés dans ce genre d'application? Le problème est que pour effectuer l'idée de thématisation en termes de composantes de style que je dois envelopper mon élément de niveau supérieur dans <ThemeProvider /> comme ceci:

<ThemeProvider theme={theme}> 
    <App /> 
</ThemeProvider> 

Mais réagir-navigation native Je n'ai pas top composant de niveau. Il a l'idée d'écrans, de sorte que l'entrée de l'application ressemblera à ceci:

registerScreens(); // this is where you register all of your app's screens 

// start the app 
Navigation.startSingleScreenApp({ 
    screen: { ... }, 
    drawer: { ... }, 
    passProps: { ... }, 
    ... 
}); 

Answer 1

La réponse est assez simple. Comme réaction natif de navigation registerComponent de a la possibilité de passer magasin Redux et fournisseur comme un des accessoires:

Navigation.registerComponent('UNIQUE_ID',() => YourComponent, store, Provider); 

Nous pouvons créer notre fournisseur personnalisé avec les deux-composants de style Redux et fournisseurs et de transmettre ce fournisseur personnalisé au registerComponent comme celui-ci :

import { Provider } from 'react-redux'; 
import { ThemeProvider } from 'styled-components'; 
import theme from './theme'; 

const Provider = ({ store, children }) => (
    <Provider store={store}> 
    <ThemeProvider theme={theme}> 
     {children} 
    </ThemeProvider> 
    </Provider> 
); 

export default Provider; 

Pour plus de détails, voir #1920.

Answer 2

Je pense que vous pouvez faire quelque chose comme ça

function wrap(Component) { 
    return function() { 
     return (
      <ThemeProvider theme={theme}> 
       <Component /> 
       <AnotherComponent/> 
      </ThemeProvider> 
     ); 
    }; 
} 

function registerScreens(store, Provider) { 
    Navigation.registerComponent('app.SomeScreen',() => wrap(SomeScreen), store, Provider); 
    // more screens... 
}