带有样式组件的 react-native-navigation 主题

Question

我正在使用 styled-components在我的 react native 项目上。我们正在使用 react-native-navigation在应用程序中执行导航。所以问题是如何在此类应用程序中从样式化组件实现主题模式？问题是，要根据样式组件执行主题化的想法，我必须将我的顶级组件包装在 <ThemeProvider /> 中。像这样:

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

但是使用 react-native-navigation 我没有顶级组件。它具有屏幕的概念，因此应用程序入口将如下所示:

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

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

Answer 1

答案很简单。由于 react-native-navigation 的 registerComponent 有可能将 redux store 和 Provider 作为 Prop 传递:

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

我们可以使用 redux 和 styled-components Provider 创建我们的自定义 Provider，并将此自定义 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 .