Değişmez İhlal: Bu gezgin için gezinme özelliği eksik

React native uygulamamı başlatmayı denediğimde bu mesajı alıyorum. Genellikle bu tür format diğer çoklu ekran navigasyonunda çalışır, ancak bu durumda bir şekilde çalışmaz.

İşte hata:

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

İşte benim uygulama formatım:

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, kök gezgini için gerekli olan açık bir uygulama kabı da dahil olmak üzere bir dizi önemli değişiklik içerir .

Geçmişte, hepsi "gezinme kapsayıcılarına" sarılmış olduğu için herhangi bir gezgin, uygulamanızın en üst düzeyinde gezinme kapsayıcısı görevi görebilirdi. Artık bir uygulama kapsayıcısı olarak bilinen gezinme kapsayıcısı, uygulamanızın gezinme durumunu koruyan ve bağlantı olaylarını gezinme eylemlerine dönüştürmek için dış dünyayla etkileşim kuran üst düzey bir bileşendir.

V2 ve önceki sürümlerde, React Navigation içerisindeki konteynerler, * Navigator oluşturma işlevleri tarafından otomatik olarak sağlanır. V3'ten itibaren, konteyneri doğrudan kullanmanız gerekmektedir. V3'te createAppContainer için createNavigationContainer adını da değiştirdik.

Ayrıca, şimdi v4 kullanıyorsanız, gezginlerin ayrı bir depoya taşındığını lütfen unutmayın. Şimdi buradan yüklemeniz ve içe aktarmanız gerekecek 'react-navigation-stack'. Örneğin import { createStackNavigator } from 'react-navigation-stack'Aşağıdaki çözüm v3 içindir.

import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
const MainNavigator = createStackNavigator({...});
const App = createAppContainer(MainNavigator);

Daha kapsamlı bir kod örneği:

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 şöyle bir şey:

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;

Sonra şununla referans verin

<App />

Yeni bir ScreenContainer.js dosyası oluşturun (adı seçebilirsiniz). Ardından ScreenContainer dosyasında şunu ekleyin:

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; 

Ardından, App.js dosyanızda:

import Container from './ScreenContainer';

class App extends Component {
  render() {
    return (
      <Container />
    );
  }
}

İşte başka bir yol

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

Basit yaptım

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

Onun yerine

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 dosyanızda buna referans verin </container>

Kod altta vardı

export default class App extends React.Component {
  render() {
    return (
      <View >
        <SimpleApp style={{ width: Dimensions.get("window").width }} />
      </View>
    );
  }
}

Onu basitçe değiştirdim ve bir cazibe gibi çalıştı. Kesinlikle, react-navigasyon kitaplığındaki güncellemeler:

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

Ayrıca createAppContainer kitaplığını en üstteki react-navigation'e dahil ettim .

Bu, iki sekme içeren bir alt gezgin oluşturmak içindir:

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;

Birçok google aramasından sonra bu çözümü almak için 2,5 saatimi boşa harcadım ... Umarım işe yarar.

sadece bu ikisini içe aktarın:

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

ve kodunuzda aşağıdaki gibi küçük bir değişiklik yapın:

sınıfın üstünde const oluştur

const AppNavigator = createAppContainer(RootStack);

ve son olarak bu const'ı sınıfta çağırmak yerine <RootStack/>

<AppNavigator />

Thankx!

Son birkaç gündür zorlanıyorum.Eğer react-navigation asyonunu package.json'dan silip npm kullanarak yüklediyseniz, lütfen yedekleme projenizi kontrol edin ve navigasyon sürümüne bakın ve eklemeyi deneyin. aynı ve düğüm modüllerini kaldırın ve npm kurulumunu yapın. Umarım işe yarar.

React-Native :-) ile kafanızı kırarken iyi şanslar