使用样式组件进行反应原生导航-Java 学习之路

我正在使用styled-components处理我的本机项目 . 我们正在使用react-native-navigation在应用程序中执行导航 . 所以问题是如何在这种应用程序中从样式组件实现主题模式？问题是，要根据样式组件执行主题的想法，我必须将我的顶级组件包装在_1514195中，如下所示：

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

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

回复于 2024-05-08T16:17:11+08:00

答案很简单 . 作为react-native-navigation的registerComponent有可能将redux store和Provider作为props传递：

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 .

回复于 2024-05-08T16:17:11+08:00

使用样式组件进行反应原生导航

2 回答

相关问题