Инвариантное нарушение: навигационный указатель отсутствует для этого навигатора

Ответ 1

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

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

В v2 и более ранних версиях контейнеры в React Navigation автоматически предоставляется функциями create * Navigator. Начиная с версии 3 Вы обязаны использовать контейнер напрямую. В v3 мы также переименованы createNavigationContainer для созданияAppContainer.

Также обратите внимание, что если вы сейчас используете 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;

Ответ 2

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

Ответ 3

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

Ответ 4

Здесь другой способ

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

Ответ 5

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;   

Ответ 6

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

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

Ответ 7

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

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

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

Вместо

export default AppNavigator;

Ответ 8

это мой файл App.js для адаптивного приложения. где я могу включить createAppContainer (AppDrawerNavigator)? и как это должно выглядеть? я новичок в реагировании

import React from 'react';
import {
  StyleSheet, View, Text,
  SafeAreaView, ScrollView, Dimensions
} from 'react-native';
import { createDrawerNavigator, DrawerItems, createAppContainer } from 'react-            
navigation';
import HomeScreen from './src/components/HomeScreen';
import Settings from './src/components/Settings';
import { Header, Left, Right, Icon } from 'native-base';

export default class App extends React.Component {
  render() {
    return (
      <AppDrawerNavigator />
    );
  }
}


const CustomDrawerComponent = (props) => (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
)

const AppDrawerNavigator = createDrawerNavigator({
  Home: HomeScreen,
  Settings: Settings
}, {
  contentComponent: CustomDrawerComponent
})



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',

  }
})

Ответ 9

Этот должен создать нижний навигатор с двумя вкладками:

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;

Ответ 10

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

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