不変の違反：このナビゲーターのナビゲーションプロップがありません

反応ネイティブアプリを起動しようとすると、このメッセージが表示されます。通常、この種類のフォーマットは他のマルチスクリーンナビゲーションで機能しますが、この場合はどういうわけか機能しません。

ここにエラーがあります：

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 * 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;

@トムディクソンはこのようなもの：

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';

const NavStack = createStackNavigator({
    ScreenOne: { 
        screen: ScreenOne,
    },
    ScreenTwo: { 
        screen: ScreenTwo,
    },
});

const App = createAppContainer(NavStack);

export default App;

次にそれを参照してください

<App />

新しいファイルScreenContainer.jsを作成します（名前を選択できます）。次に、ScreenContainerファイルに次を追加します。

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import MainScreen from './MainScreen'; 
import AboutScreen from './AboutScreen';

const NavigationStack = createStackNavigator({
    Main: { 
        screen: MainScreen,
    },
    About: { 
        screen: AboutScreen,
    },
});

const Container = createAppContainer(NavigationStack);

export default Container; 

次に、App.jsファイルで：

import Container from './ScreenContainer';

class App extends Component {
  render() {
    return (
      <Container />
    );
  }
}

ここに別の方法があります

import React, {Component} from 'react';
import { StyleSheet, Text, View } from 'react-native';
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
    }
  },
  {
    initialRouteName: 'Home'
  }

);

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

export default createAppContainer(RootStack);

const AppNavigator = createStackNavigator({
  Home: { screen: Home },
  Friends: { screen: Friends },
});

シンプルな

const App = createAppContainer(AppNavigator);
export default App;

の代わりに

export default AppNavigator;

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './home';
import Details from './details';

const Root = createStackNavigator({

    home: { 

        screen: Home,
    },

    details: { 

        screen: Details,
    },

});

const container = createAppContainer(Root);
export default container;   

あなたのApp.jsファイルでそれを参照してください </container>

一番下にコードがありました

export default class App extends React.Component {
  render() {
    return (
      <View >
        <SimpleApp style={{ width: Dimensions.get("window").width }} />
      </View>
    );
  }
}

私はそれを単に交換して、魅力のように機能しました。間違いなく、それは反応ナビゲーションライブラリの更新によるものです。

const App = createAppContainer(SimpleApp);
export default App;

また、createAppContainerライブラリを上部の反応ナビゲーションにも含めました。

これは、2つのタブを持つ下部ナビゲーターを作成するためのものです。

import {createBottomTabNavigator, createAppContainer} from 'react-navigation';

export class Home extends Component{
   //...
}

export class Settings extends Component{
   //...
}     

const navig = createBottomTabNavigator({
  Home: Home,
  Settings: Settings
});

const App = createAppContainer(navig);

export default App;

私は多くのグーグル検索の後にこの解決策を得るために私の2.5時間を無駄にしました...これがうまくいくことを願っています

この2つをインポートするだけです。

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

次のようにコードを少し変更します。

クラスの上にconstを作成する

const AppNavigator = createAppContainer(RootStack);

最後に、代わりにクラスでそのconstを呼び出します <RootStack/>

<AppNavigator />

ありがとう！

私は過去数日苦労してきました。package.jsonからreact-navigationを削除し、npmを使用してインストールした場合、解決に苦労している可能性があります。バックアッププロジェクトを確認し、ナビゲーションバージョンを確認して、同じで、node-modulesを削除してnpm installを実行します。その作品を願っています。

React-Nativeで頭を壊す幸運:-)