如何将我的反应原生屏幕保留在 ApolloProvider 标签中？答案

【问题标题】：How can I keep my react native screens inside ApolloProvider tag?如何将我的反应原生屏幕保留在 ApolloProvider 标签中？
【发布时间】：2019-02-10 01:28:40
【问题描述】：

文档解释说我可以这样管理我的屏幕：

const App = createStackNavigator({
  MainScreen: { screen: MainScreen },
  SecondScreen: {screen: SecondScreen}
});

对于 Apollo，文档说我应该通过将根组件放置在 ApolloProvider 标记中来进行集成，如下所示：

const App = () => (
  <ApolloProvider client={client}>
    <MyRootComponent />
  </ApolloProvider>
);

我不明白如何同时拥有这两者。因为 RootComponent 是一个常数，所以这样的东西不会起作用，但我不知道还能做什么：

const RootComponent = createStackNavigator({
      MainScreen: { screen: MainScreen },
      SecondScreen: {screen: SecondScreen}
    });
const App = () => (
      <ApolloProvider client={client}>
        <MyRootComponent />
      </ApolloProvider>
    );

否则我将不得不在每个新屏幕上添加 ApolloProvider 标签。

我是 react native 的新手，我发现管理这些类和常量很困难。

-- 编辑 ---

即使设置了正确的名称 RootComponent，我仍然收到此错误：修复组件名称会给我错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of ExpoRootComponent.

我的猜测是 RootComponent 是一个常量，而不是 React.Component 类。但我不知道如何解决它。

【问题讨论】：

RootComponent 不需要是一个类。您可以发布 MainScreen 和 SecondScreen 组件的代码吗？
"RootComponent 不需要是一个类。"。该声明使我以不同的眼光看待代码，令人失望的是，问题在于我没有在文件末尾导出常量 App。请相应地编辑您的答案，以便我选择它作为正确答案。
啊是的..就可以了。完成！

标签： reactjs react-native apollo

【解决方案1】：

看起来像您的“屏幕”组件的名称，“RootComponent”名称与 ApolloProvider 中的组件名称不匹配。

试试这个：

const RootComponent = createStackNavigator({
  MainScreen: { screen: MainScreen },
  SecondScreen: {screen: SecondScreen}
}, { initialRouteName: 'MainScreen' });

const App = () => (
  <ApolloProvider client={client}>
    <RootComponent />
  </ApolloProvider>
);

export default App;

编辑 -

同时导出您的 App 组件，并确保您在索引文件的渲染函数中渲染它。

【讨论】：

感谢您的关注。我将对问题添加一个编辑并显示我得到的错误。