Question

文档说明我可以像这样管理屏幕：

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标记。

我是新来的响应本机的人，我发现很难管理那些类和常量。

-编辑---

即使设置了正确的名称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类。但是我不知道如何解决。

Answer 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组件，并确保您正在索引文件的render函数中对其进行渲染。

如何将我的本机屏幕保持在ApolloProvider标签内？

1 个答案: