Vi phạm bất biến: Thiếu trụ điều hướng cho điều hướng này

Tôi nhận được thông báo này khi tôi thử khởi động ứng dụng gốc phản ứng của mình. Thông thường loại định dạng này hoạt động trên điều hướng đa màn hình khác nhưng bằng cách nào đó không hoạt động trong trường hợp này.

Đây là lỗi:

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

Đây là định dạng ứng dụng của tôi:

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 có một số thay đổi đột phá bao gồm một vùng chứa ứng dụng rõ ràng được yêu cầu cho trình điều hướng gốc.

Trước đây, bất kỳ công cụ điều hướng nào cũng có thể hoạt động như một vùng chứa điều hướng ở cấp cao nhất của ứng dụng của bạn vì tất cả chúng đều được bao bọc trong “vùng chứa điều hướng”. Vùng chứa điều hướng, hiện được gọi là vùng chứa ứng dụng, là một thành phần có thứ tự cao hơn duy trì trạng thái điều hướng của ứng dụng của bạn và xử lý việc tương tác với thế giới bên ngoài để biến các sự kiện liên kết thành hành động điều hướng, v.v.

Trong phiên bản v2 trở về trước, các vùng chứa trong React Navigation được cung cấp tự động bởi các chức năng create * Navigator. Kể từ phiên bản v3, bạn bắt buộc phải sử dụng trực tiếp vùng chứa. Trong v3, chúng tôi cũng đã đổi tên createNavigationContainer thành createAppContainer.

Cũng xin lưu ý rằng nếu bạn hiện đang sử dụng v4, các trình điều hướng đã được chuyển sang một kho riêng. Bây giờ bạn sẽ cần cài đặt và nhập từ 'react-navigation-stack'. Ví dụ: import { createStackNavigator } from 'react-navigation-stack'Giải pháp dưới đây là dành cho v3.

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

Một ví dụ mã toàn diện hơn:

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 đại loại như thế này:

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;

Sau đó, tham khảo nó với

<App />

Tạo một tệp mới ScreenContainer.js (bạn có thể chọn tên). Sau đó, trong tệp ScreenContainer thêm:

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; 

Sau đó, tại tệp App.js của bạn:

import Container from './ScreenContainer';

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

Đây là một cách khác

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

Đơn giản tôi đã làm

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

Thay vì

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;   

trong tệp App.js của bạn, hãy tham chiếu nó với </container>

Tôi có mã ở dưới cùng

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

Tôi chỉ đơn giản là thay thế nó bằng và nó hoạt động như một sự quyến rũ. Chắc chắn, đó là do các bản cập nhật trong thư viện điều hướng phản ứng:

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

Ngoài ra, tôi cũng đưa thư viện createAppContainer vào điều hướng phản ứng ở trên cùng.

Cái này là để tạo một trình điều hướng dưới cùng với hai tab:

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;

Tôi đã lãng phí 2,5 giờ của mình để có giải pháp này sau nhiều lần tìm kiếm trên google ... Hy vọng điều này sẽ hiệu quả.

chỉ cần nhập hai cái này:

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

và thực hiện một chút thay đổi đối với mã của bạn như sau:

tạo const phía trên lớp

const AppNavigator = createAppContainer(RootStack);

và cuối cùng gọi const đó trong lớp thay vì <RootStack/>

<AppNavigator />

Thankx!

Tôi đã gặp khó khăn trong vài ngày qua. Có thể bạn cũng đang đấu tranh để giải quyết nếu và nếu bạn đã xóa điều hướng phản ứng khỏi package.json và cài đặt bằng npm, vui lòng kiểm tra dự án sao lưu của bạn và xem phiên bản điều hướng và thử thêm giống nhau và loại bỏ mô-đun nút và cài đặt npm. Hy vọng nó hoạt động.

Chúc may mắn vỡ òa với React-Native :-)