Как я могу сохранить свои реагирующие нативные экраны внутри тега ApolloProvider?

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;

Редактировать -

также экспортируйте компонент приложения и убедитесь, что вы отображаете его в функции рендеринга в файле индекса.