Неизменяемое нарушение: для этого навигатора отсутствует опора навигации.

Я получаю это сообщение, когда пытаюсь запустить собственное приложение React. Обычно такой формат работает с другой многоэкранной навигацией, но как-то не работает в этом случае.

Вот ошибка:

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 имеет ряд критических изменений, включая явный контейнер приложения, необходимый для корневого навигатора.

В прошлом любой навигатор мог действовать как контейнер навигации на верхнем уровне вашего приложения, потому что все они были заключены в «контейнеры навигации». Контейнер навигации, теперь известный как контейнер приложения, представляет собой компонент более высокого порядка, который поддерживает состояние навигации вашего приложения и обрабатывает взаимодействие с внешним миром, чтобы превратить события связывания в действия навигации и т. Д.

В версии 2 и ранее контейнеры в React Navigation автоматически предоставляются функциями create * Navigator. Начиная с версии 3, вы должны использовать контейнер напрямую. В версии 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 />

Thankx!

Я боролся последние несколько дней. Ну, может быть, вы тоже изо всех сил пытались решить, удалили ли вы реагирующую навигацию из package.json и установили ее с помощью npm, пожалуйста, проверьте свой проект резервного копирования и посмотрите версию навигации и попробуйте добавить то же самое и удалите модули узлов и выполните установку npm. Надеюсь, это сработает.

Удачи, ломая голову с React-Native :-)