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

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

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; 

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;   

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;