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

React Navigation 3.0 имеет ряд критические изменения, включая явный контейнер приложения, необходимый для корневого навигатора.

In the past, any navigator could act as the navigation container at the top-level of your app because they were all wrapped in “navigation containers”. The navigation container, now known as an app container, is a higher-order-component that maintains the navigation state of your app and handles interacting with the outside world to turn linking events into navigation actions and so on.

In v2 and earlier, the containers in React Navigation are automatically provided by the create*Navigator functions. As of v3, you are required to use the container directly. In v3 we also renamed createNavigationContainer to 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 />

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

Вот другой способ

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);

У меня был код внизу

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 в реакцию-навигацию вверху.

Создайте новый файл 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 {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;

const AppNavigator = createStackNavigator({
  Home: { screen: Home },
  Friends: { screen: Friends },
});

Просто я сделал

const App = createAppContainer(AppNavigator);
export default App;

Вместо

export default AppNavigator;

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

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

Я потратил свои 2,5 часа, чтобы получить это решение после многих поисков в Google ... Надеюсь, это сработает.

просто импортируйте эти два:

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

и внесем небольшие изменения в свой код следующим образом:

создать const над классом

const AppNavigator = createAppContainer(RootStack);

и, наконец, вызовите эту const в классе вместо <RootStack/>

<AppNavigator />

Спасибо!