불변 위반 :이 네비게이터에 대한 탐색 소품이 없습니다.

반응 네이티브 앱을 시작하려고 할 때이 메시지가 표시됩니다. 일반적으로 이러한 종류의 형식은 다른 다중 화면 탐색에서 작동하지만이 경우에는 작동하지 않습니다.

다음은 오류입니다.

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;

@Tom Dickson은 다음과 같습니다.

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;

또한 상단의 react-navigation에도 createAppContainer 라이브러리를 포함 시켰 습니다.

이것은 두 개의 탭이있는 하단 탐색기를 만드는 것입니다.

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;

많은 Google 검색 후이 솔루션을 얻기 위해 2.5 시간을 낭비했습니다 ...이 작동하기를 바랍니다.

이 두 가지를 가져옵니다.

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

다음과 같이 코드를 약간 변경하십시오.

클래스 위에 const 만들기

const AppNavigator = createAppContainer(RootStack);

마지막으로 대신 클래스에서 해당 const를 호출하십시오. <RootStack/>

<AppNavigator />

감사합니다!

지난 며칠 동안 어려움을 겪고 있습니다. package.json에서 react-navigation을 삭제하고 npm을 사용하여 설치 한 경우에도 해결하기 위해 고군분투하고있을 수 있습니다. 백업 프로젝트를 확인하고 탐색 버전을 확인하고 동일하고 노드 모듈을 제거하고 npm 설치를 수행하십시오. 그 작품을 바랍니다.

React-Native로 머리를 부수는 행운을 빕니다 :-)