[解決済み] 不変量違反。このナビゲーターでは、ナビゲーションプロップがありません。

質問

reactネイティブアプリを起動しようとすると、このようなメッセージが表示されます。通常、このような形式は他のマルチスクリーンナビゲーションでは機能しますが、この場合はなぜか機能しません。

以下がそのエラーです。

Invariant Violation: The navigation prop is missing for this navigator. In 
react-navigation 3 you must set up your app container directly. More info: 
https://reactnavigation.org/docs/en/app-containers.html

以下は私のアプリのフォーマットです。

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';

import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator(
  {
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  },
  {
    initialRouteName: 'Home'
  }

);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

どのように解決するのですか？

React Navigation 3.0では、複数の の破壊的な変更があります。 ルート ナビゲータに必要な明示的なアプリ コンテナを含む、多くの変更点があります。

以前は、どのナビゲータも「ナビゲーション コンテナ」にラップされていたため、アプリのトップ レベルでナビゲーション コンテナとして動作できました。ナビゲーション コンテナは、現在ではアプリ コンテナとして知られており、アプリのナビゲーション状態を維持し、リンク イベントをナビゲーション アクションに変えるなど、外部との対話を処理する高次のコンポーネントです。

v2以前では、React Navigationのコンテナは、create*Navigationによって自動的に提供されます。 create*Navigator 関数によって自動的に提供されます。v3.時点では は、コンテナを直接使用する必要があります。また、v3では createNavigationContainerをcreateAppContainerに改名しました。

また、v4 を使用している場合、ナビゲータは別のリポジトリに移動されたことに注意してください。現在は、インストールし 'react-navigation-stack' . 例えば import { createStackNavigator } from 'react-navigation-stack' 以下の解答はv3用です。

import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
const MainNavigator = createStackNavigator({...});
const App = createAppContainer(MainNavigator);

より包括的なコード例です。

import {
      createStackNavigator,
      createAppContainer
    } from 'react-navigation';
import Login from './view/login.js'
import SignUp from './view/signup.js'

const RootStack = createStackNavigator({
    Home: {
      screen: Login
    },
    Signup: {
      screen: SignUp
    }
  });

const App = createAppContainer(RootStack);

export default App;