☰

不変違反: このナビゲータのナビゲーションプロパティがありません 質問する

tag-icon • tag-icon reactjs react-native
不変違反: このナビゲータのナビゲーションプロパティがありません 質問する

React Native アプリを起動しようとしたときに、このメッセージが表示されました。通常、この種類の形式は他のマルチスクリーン ナビゲーションでは機能しますが、この場合は何らかの理由で機能しません。

エラーは次のとおりです:

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 />;
  }
}

ベストアンサー1

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;

おすすめ記事