javascript - Invariant Violation : The navigation prop is missing for this navigator. 在 react-navigation 3 中你必须直接设置你的应用容器

Question

我正在尝试使用最新的 react-navigation 版本运行我的应用程序但无法正常工作。也尝试使用此解决方案 ( Invariant Violation: The navigation prop is missing for this navigator ) 但没有解决方案。

错误信息

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

我的代码

App.js

import App from './app/index';
export default App;

索引.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";

import { SignedOut } from "./router";

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

路由器.js

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

import SignUp from "./screens/SignUp";
import SignIn from "./screens/SignIn";

export const SignedOut = createStackNavigator({
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Sign Up"
    }
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Sign In"
    }
  }
});

引用:https://github.com/datomnurdin/auth-reactnative

Answer 1

在以前的 react-navigation 版本中，App 容器由 create*Navigation 方法提供。

在 react-navigation v3 中，您需要手动添加 App Container，如前所述 here

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

const SignedOutNavigator = createStackNavigator({
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Sign Up"
    }
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Sign In"
    }
  }
});

export const SignedOut = createAppContainer(SignedOutNavigator); // Use this