불변 위반:이 탐색기에 대한 탐색 소품이 없습니다.

불변 위반:이 탐색기에 대한 탐색 소품이 없습니다.

리액트 네이티브 앱을 기동하려고 했을 때, 이 메세지가 왔습니다.보통 이런 형식은 다른 멀티스크린 내비게이션에서도 작동하지만 이 경우에는 작동하지 않습니다.

다음은 오류입니다.

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 Navigator의 컨테이너가 create*Navigator 기능에 의해 자동으로 제공됩니다.v3부터는 컨테이너를 직접 사용해야 합니다.v3에서는 createNavigationContainer의 이름도 createAppContainer로 변경했습니다.

또한 현재 v4를 사용 중인 경우 네비게이터가 별도의 리포로 이동되었습니다.이제 설치 및 Import가 필요합니다.'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 />
    );
  }
}

많은 구글 검색 끝에 이 솔루션을 얻기 위해 2.5시간을 허비했다.이게 먹히길 바라.

다음 두 가지를 Import합니다.

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

코드를 다음과 같이 변경합니다.

클래스 위에 const를 작성하다

const AppNavigator = createAppContainer(RootStack);

그리고 마지막으로 수업시간에 경찰관을 불러서<RootStack/>

<AppNavigator />

감사합니다!

다른 방법이 있다

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 라이브러리를 리액트 내비게이션에 포함시켰습니다.

다음 두 개의 탭이 있는 하단 네비게이터를 작성합니다.

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;

나는 지난 며칠 동안 고생했다.패키지에서 반응 항법 기능을 삭제한 경우 해결하지 못할 수도 있습니다.npm을 사용하여 설치된 json은 백업프로젝트를 확인하고 네비게이션버전을 확인하고 npm 설치를 시도합니다.효과가 있길 바래.

리액트 네이티브로 머리를 깨는 행운을 빈다:-)

언급URL : https://stackoverflow.com/questions/53367195/invariant-violation-the-navigation-prop-is-missing-for-this-navigator