Інваріантне порушення: для цього навігатора відсутня опора навігації

Я отримую це повідомлення, коли я спробував запустити власний реактивний додаток. Зазвичай такий формат працює на інших багатоекранних навігаціях, але в цьому випадку якось не працює.

Ось помилка:

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, ви повинні використовувати контейнер безпосередньо. У версії 3 ми також перейменували 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;

Також я включив бібліотеку 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;

Я витратив свої 2,5 години, щоб отримати це рішення після багатьох пошукових запитів Google ... Сподіваюся, це спрацює.

просто імпортуйте це два:

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

і внесіть невеликі зміни в свій код так:

створити const над класом

const AppNavigator = createAppContainer(RootStack);

і нарешті назвіть це const у класі замість <RootStack/>

<AppNavigator />

Дякую!

Я боровся з останніх кількох днів. Можливо, ви теж намагаєтеся вирішити, якщо і якщо ви видалили реакцію-навігацію з пакета.json і встановили за допомогою npm, перевірте ваш резервний проект і перегляньте версію навігації та спробуйте додати видаліть вузлові модулі та встановіть npm. Сподіваюся, що це працює.

Удачі, розбивши голову з React-Native :-)