react-native-navigation主题与样式组件

我正在与styled-components在我的react-native项目上工作。我们正在使用react-native-navigation在应用程序内执行导航。所以问题是我怎样才能从这种应用程序中的样式组件实现主题模式？的问题是，在风格组件我有我的包裹顶级组件在<ThemeProvider />这样的条款进行主题化的想法：react-native-navigation主题与样式组件

<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: { ... }, 
    ... 
});

来源

2017-10-12 Sergey Sivchenko

的答案是非常简单的。作为反应，本机导航的registerComponent有可能通过Redux的存储和供应商作为道具：

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

我们可以创建自定义提供既终极版和风格的组件供应商和这个定义提供传递给这样的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。

来源

2017-10-13 06:55:51

我认为你可以做这样的事情

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

来源

2017-10-12 14:19:13

谢谢你的回答。这绝对是选项，但这意味着我必须用这个HOC来包装所有的屏幕。我正在寻找一些解决方案，比如它是为Redux Provider制作的。有办法做到这一点。（看[＃1920]（https://github.com/wix/react-native-navigation/issues/1920）） –

react-native-navigation主题与样式组件

回答

相关问题