将 ThemeProvider 包装到 wix react-native-navigation V2答案

【问题标题】：Wrapping ThemeProvider to wix react-native-navigation V2将 ThemeProvider 包装到 wix react-native-navigation V2
【发布时间】：2019-02-19 20:05:34
【问题描述】：

我正在尝试使用 react-native-elements ThemeProvider 包装我的基于 RNN v2 的应用程序。如果将 ThemeProvider 包裹在单个组件上，但如果使用 Navigation 注册则不能与相同的主题一起工作，我做错了什么？

    const theme = {
  colors: {
    primary: 'pink'
  }
};
// Register screens
Screens.forEach((ScreenComponent, key) =>
  // Navigation.registerComponent(key, () => ScreenComponent, Provider)
  Navigation.registerComponent(
    key,
    () => ScreenComponent,
    () => <ThemeProvider theme={theme}>{ScreenComponent}</ThemeProvider>
  )
);

我也试过这种方式..

import { Platform } from 'react-native';
import { colors, ThemeProvider } from 'react-native-elements';
import React from 'react';

const theme = {
  colors: {
    primary: 'pink'
  }
};

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

export default Provider;

App.js
Screens.forEach((ScreenComponent, key) =>
  Navigation.registerComponent(key, () => ScreenComponent, Provider)

【问题讨论】：

标签： react-native-navigation wix-react-native-navigation react-native-navigation-v2 react-native-elements

【解决方案1】：

您可以使用提供程序来包装组件，如下所示：

Navigation.registerComponent(key, () => (props) =>
    <Provider>
      <ScreenComponent {...props} />
    </Provider>,
    () => ScreenComponent);

第一个参数：注册名称
第二个参数：生成器函数它返回用 Provider 包裹的组件
第三个参数：返回实际组件的生成器函数。这是需要的因为 RNN 需要提升非反应静态变量

【讨论】：