反応しているスタイルのコンポーネントと反応す​​るネイティブナビゲーションテーマ

Question

私は反応がネイティブなプロジェクトでstyled-componentsと働いています。アプリケーション内でナビゲーションを実行するためにreact-native-navigationを使用しています。ですから、そのような種類のアプリケーションでスタイル付きコンポーネントからテーマパターンを実装するにはどうしたらいいですか？ 問題は、それは私がこのような<ThemeProvider />に私のトップレベルのコンポーネントをラップする必要がスタイル付きコンポーネントの観点からテーマのアイデアを実行することです：

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

しかし、私はトップを持っていない反応し、ネイティブのナビゲーションでレベルコンポーネントです。これは、画面の考えを持っているので、アプリケーションのエントリは次のようになります。

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

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

Answer 1

ような何かを行うことができると思います。反応するネイティブ・ナビゲーションのregisterComponentが小道具としてReduxの店やプロバイダに合格する可能性を持っていたよう：

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

我々はReduxのとスタイル・コンポーネントの両方のプロバイダで、当社のカスタムプロバイダを作成し、このようregisterComponentにこのカスタムプロバイダを渡すことができます：

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; 

詳細は#1920をご覧ください。

Answer 2

私はあなたが答えはかなり簡単だったこの

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... 
}