我可以将 wix/react-native-navigation 创建的根组件包装在 ApolloProvider 组件中吗答案

【问题标题】：Can I wrap the root component created by wix/react-native-navigation in an ApolloProvider component我可以将 wix/react-native-navigation 创建的根组件包装在 ApolloProvider 组件中吗
【发布时间】：2017-02-25 02:39:24
【问题描述】：

我将 Meteor 的 Apollo 客户端与 wix/react-native-navigation 结合使用，我想知道是否可以将 Navigation.startSingleScreenApp 创建的根组件包装在 ApolloProvider 组件中？我尝试将Navigation.startSingleScreenApp 放在另一个组件的渲染方法中，并将其包含在ApolloProvider 中，但这不起作用。有没有人有过将这两者结合使用的经验？

我想知道在Navigation.registerComponent 注册的每个组件是否都有自己单独的根组件，如果是这种情况，我必须将我在ApolloProvider 注册的每个组件都附上，可能使用更高阶的组件？我将不胜感激任何人可以提供的任何想法或示例代码！提前致谢。

【问题讨论】：

标签： meteor react-native apollostack react-native-navigation

【解决方案1】：

我已经使用高阶组件来包装每个已注册的组件。我用于 HOC 的代码如下：

import React from 'react';
import appClient  from '../store/apollo';
import { ApolloProvider } from 'react-apollo';

export default function apolloProviderHOC(WrappedComponent){
  return class PP extends React.Component {
    render() {
      return (
        <ApolloProvider client={appClient}>
          <WrappedComponent {...this.props}/>
        </ApolloProvider>
      );
    }
  }
}

只需导入上面的函数，然后将要包装的组件传递进去即可。

【讨论】：

【解决方案2】：

我为这个问题找到的最简单的解决方案是像这样在 registerComponent 函数中简单地传递 ApolloClient ：

Navigation.registerComponent('pm.SplashScreen', () => SplashScreen, store, Provider, {client});

必须将 ApolloClient 称为“客户端”，因为 react-native-navigation 在您传递的那个对象上使用了传播运算符。

【讨论】：