reactjs - 不變違規:此導航器缺少導航道具




react-native (6)

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

當我嘗試啟動我的本機應用程序時，我收到此消息。 通常這種格式適用於其他多屏幕導航，但在某種程度上不適用於這種情況。

這是錯誤： 

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有許多 重大更改， 包括根導航器所需的顯式應用程序容器。

過去，任何導航器都可以充當應用程序頂層的導航容器，因為它們都包含在“導航容器”中。 導航容器（現在稱為app容器）是一個高階組件，它維護應用程序的導航狀態並處理與外部世界的交互，以將鏈接事件轉換為導航操作等。

在v2及更早版本中，React Navigation中的容器由create * Navigator函數自動提供。 從v3開始，您需要直接使用容器。 在v3中，我們還將createNavigationContainer重命名為createAppContainer。 

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;

我的代碼位於底部 

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 庫包含在頂部的react-navigation中。

這個是創建一個帶有兩個標籤的底部導航器： 

 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; 

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 {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 App = createAppContainer(AppNavigator); export default App;

代替 

 export default AppNavigator;



reactjs   react-native  


react-native